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

Question

我想在单击按钮时从一个页面导航到另一个页面以及另一个页面中的特定元素。我怎样才能做到这一点？

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

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

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

我正在通过 index.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 })">

描述了精确解here

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

Navigate to another page and a specific element Angularjs

angularjs

ngroute

angularjs-ng-route