javascript - 指令内动态 ui-sref

Question

我在 Angular 应用程序中创建了一个自定义指令，其中包含几个 ui-sref 链接。我希望此链接根据当前状态或正在加载的模板进行更改:

<toolbar-admin page="vm.page"></toolbar-admin>

我的目的是通过属性传递此信息，以便基于 page 变量生成链接，如下所示:

<div id="toolbar" class="col-xs-12 no-pad border-bottom">
  <ul class="nav navbar-nav no-collapse">
      <li class="no-collapse">
        <a ui-sref="admin.view({page: vm.page})" role="button"><span class="melon-icon-md melon-icon-back"></span></a>
      </li>
    <li class="no-collapse">
      <a class="toolbar-title" lang-tag="ProjectOverview">Project Overview</a>
    </li>
  </ul>
  <ul class="nav navbar-nav navbar-right force-right no-collapse">
    <li class="no-collapse">
      <a ui-sref="admin.edit({page: vm.page})" role="button"><span class="melon-icon-md melon-icon-edit"></span></a>
    </li>
  </ul>
</div>

但是，指令中 scope.page 的 console.log 将输出确切的字符串 "vm.page"，而不是我想要的页码。

这是指令:

(function() {
    'use strict';

    angular
        .module('melon')
        .directive('toolbarAdmin', directive);

    function directive() {
        var directive = {
            templateUrl: 'app/shared/directives/toolbar/toolbar.admin.html',
            scope: {
                page: '='
            },
            restrict: 'EA',
            replace: 'true',
            link: linkFunc,
            controller: Controller,
            controllerAs: 'vm',
            bindToController: true
        };

        return directive;

        function linkFunc(scope, el, attr, ctrl) {
            scope.page = attr.page;

            console.log(scope.page);
        }
    }

    Controller.$inject = ['$rootScope', '$scope', '$state', '$stateParams'];

    function Controller($rootScope, $scope, $state, $stateParams) {
        var vm = this;
    }
})();

如何正确地将页面变量传递给 toolbar-admin 指令？

Answer 1

您不必担心指令 Controller 内scope.page 的分配，因为您已经使用了page: '='。这意味着您启用了两种方式绑定(bind) vm.page 和指令 page 变量。

function linkFunc(scope, el, attr, ctrl) {
   scope.page = attr.page;
   console.log(scope.page);
}

因为您的链接似乎覆盖了 attr.page 的实际绑定(bind)值，这将是 vm.page。并且您将该变量重新分配给 scope.page

如果删除 link 函数将解决指令内的绑定(bind)问题。