导航到另一个页面和特定元素 Angularjs

Question

我想通过单击按钮从一个页面导航到另一个页面和另一个页面中的特定元素。我该怎么做？

我的场景：索引.html和期刊.html是两个文件，期刊.html有多个元素。现在，单击index.html中的按钮，我想直接导航到Journalical.html中的特定元素，我正在使用$stateProvider和$urlRouterProvider

我的状态（在导航到期刊之前工作正常.html）：

.state('page.periodical', {
                url: '/periodical',
                controller: 'PeriodicalController',
                controllerAs: 'periodical',
                templateUrl: 'app/components/page/periodical/periodical.html',
                data: {
                    pageTitle: 'Periodical page',
                    dashboard: 'periodical'
                }
        })

我正在从索引.html控制器进行$state.go('page.periodical');，该控制器工作正常。如何实现$state.go('page.periodical#rt_page_element1');？这会导致错误，但元素引用#rt_page_element1是正确的。

Answer 1

你必须装饰$stateProvider

angular.module('app').config(['$provide', function ($provide) {
  /**
   * Extend the UI Router $stateProvider, adding the ability to specify an
   * anchor hash as a parameter in the ui-sref directive.
   */
  $provide.decorator('$state', ['$delegate', function ($stateProvider) {
    // Save the orignal function for generating a state's URL.
    var $stateHref = $stateProvider.href;
    // Create our extended function.
    $stateProvider.href = function href(stateOrName, params, options) {
      var hash = '';
      params = params || {};
      var hashParam = params['#'];
      // Check if the anchor parameter was specified.
      if (typeof hashParam !== 'undefined') {
        // Ensure hash parameter is a string and not empty.
        if ((typeof hashParam === 'string' || hashParam instanceof String) && hashParam.length) {
          hash = '#' + hashParam;
        }
        delete params['#'];
      }
      // Return the original parsed URL with the hash appended.
      return $stateHref(stateOrName, params, options) + hash;
    };
    return $stateProvider;
  }]);
}]);

然后

<a ui-sref="page.periodical({'#': IDToScrollTo })">

确切的解决方案在这里描述