AngularJS ui.router change page and go to specific section

问题

I use the AngularJS ui.router in my application. For a new use case I want to change the view from index.html to my partialview options.html. My options.html has different sections.

The routing between the different views is working correctly, but I want to change the view and go directly to the section on this view.

Means from resources/html/index.html to resources/html/index.html#/options with a specific section.

I have a dropdown-menu with different ui-sref (some for tests) and there I want to call the view and section.

Dropdown 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 anybody have a solution for this?

Thanks in advance.

EDIT

If I hit the URL resources/html/index.html#/options#option2 directly in the browser, I come to the options page and to the correct section. But this is what I dont want.

来源：https://stackoverflow.com/questions/25305078/angularjs-ui-router-change-page-and-go-to-specific-section

标签

javascript

html

angularjs

angular-ui-router