动态ui-sref内部指令

Question

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

<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

您不必担心指令控制器中的scope.page的分配，因为您已经使用了page: '=' 。 这意味着您启用了双向绑定vm.page和指令page变量。

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

正如您的链接似乎通过attr.page覆盖实际绑定的值，该值将为vm.page 。 然后您将该变量重新分配给scope.page

如果删除link功能，将可以解决指令内部的绑定问题。