I am using AngularJS ui.router in my application. For the new use case, I want to change the view from index.html to my partialview options.html. My options.html has different sections.
Routing between different views works correctly, but I want to change the view and go directly to section in that view.
So from resources/html/index.html to resources/html/index.html#/options with a specific section.
I have a drop-down menu with different ui-sref (some for tests), and there I want to call the view and section.
drop-down menu in index.html
<ul class="dropdown-menu"> <li> <a ui-sref="home">Home</a> //works fine <a ui-sref="options">Optionen</a> //works fine <a ui-sref="options" scroll-to="option1">option1</a> //here should be the call of the view and section </li> </ul>
options.html with some sections
<section id="option1"> <div class="page-header"> <h1>option1</h1> </div> </section> ... <section id="option2"> <div class="page-header"> <h1>option2</h1> </div> </section>
app.js
App.config(['$stateProvider', function ($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url : '/home', templateUrl: 'home/homeLayout.html' }) .state('options', { url : '/options', templateUrl: 'options/options.html' }); }]);
Does anyone have a solution for this?
Thanks in advance.
EDIT
If I click the URL resources/html/index.html#/options#option2 directly in the browser, I will go to the options page and to the desired section. But that I do not want.