我在 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
指令?
最佳答案
您不必担心指令 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)问题。
关于javascript - 指令内动态 ui-sref,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31898248/