angular js指令中的"controller as"名称与父控制器中的函数相同
Sta*_*eff 4 javascript angularjs angularjs-directive angularjs-controller
我有一个带有一些项目的控制器,ng-repeat每个项目应该得到一个随机颜色,所以我使用ng-style该控制器中的一个函数调用randColor(...).
app.controller('TestController', function() {
var vm = this;
vm.items = [ { name: 'item 1' } , { name: 'item 2'} ];
vm.randColor = function (item) {
if (!item) {
return 'red';
}
else if (!item.color)
{
var color = 'rgb('
+ _.random(0, 255) + ','
+ _.random(0, 255) + ','
+ _.random(0, 255) + ')';
item.color = color;
}
return item.color;
};
});
我正在使用"控制器为"语法,我通常总是使用vm我的控制器的短名称.即使以同样的方式命名"子"控制器,我也从来没有遇到过这样的问题.
但是现在我已经尝试用指令做同样的事情,突然我的randColor(...)功能停止了工作.
HTML:
<body ng-controller="TestController as vm">
<!-- This works -->
<h3>Without Directive (controllerAs: 'vm')</h3>
<div ng-repeat="item in vm.items">
<div ng-style="{ background: vm.randColor(item) }" class="container">
<h4>{{ item.name }}</h4>
<div ng-controller="TestDirectiveController as vm">
<div>{{ vm.title }}</div>
</div>
</div>
</div>
<!-- This works -->
<h3>Test Directive Alternative (controllerAs: 'directiveVM')</h3>
<div ng-repeat="item in vm.items">
<div ng-style="{ background: vm.randColor(item) }" class="container">
<h4>{{ item.name }}</h4>
<test-directive-alt></test-directive-alt>
</div>
</div>
<!-- This DOES NOT work -->
<h3>Test Directive (controllerAs: 'vm')</h3>
<div ng-repeat="item in vm.items">
<div ng-style="{ background: vm.randColor(item) }" class="container">
<h4>{{ item.name }}</h4>
<test-directive></test-directive>
</div>
</div>
</body>
JS:
app.controller('TestDirectiveController', function() {
var vm = this;
vm.title = 'test';
});
app.directive('testDirective', function() {
return {
restrict: 'EA',
controller: 'TestDirectiveController',
controllerAs: 'vm',
bindToController: true,
template: '<div>{{ vm.title }}</div>'
};
});
app.directive('testDirectiveAlt', function() {
return {
restrict: 'EA',
controller: 'TestDirectiveController',
controllerAs: 'directiveVM',
bindToController: true,
template: '<div>{{ directiveVM.title }}</div>'
};
});
输出:
我知道我可以在控制器中使用不同的名称,但是为什么这首先发生呢？
有没有办法让它使用相同的名称？
您遇到的问题似乎与指令在与定义控制器的作用域相同的作用域上执行的事实有关vm.
您需要做的是scope: {}在指令中创建一个新范围.
app.directive('testDirective', function() {
return {
restrict: 'EA',
scope: {},
controller: 'TestDirectiveController',
controllerAs: 'vm',
bindToController: true,
template: '<div>{{ vm.title }}</div>'
};
});
有了它,controllerAs应该vm在指令范围内创建一个新属性.