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>

但是，指令中的console.log scope.page将输出确切的字符串"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

当你使用page: '='时，你不应该担心指令控制器中scope.page的分配。这意味着您启用了双向绑定vm.page＆amp;指令page变量。

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

由于您的链接似乎覆盖attr.page实际绑定的值vm.page。并且您将该变量重新分配给scope.page

如果删除link功能，将解决您在指令中绑定的问题。

动态ui-sref里面的指令

1 个答案: