相同的“控制器” angular js指令中的name会破坏父控制器中的函数 [英] Same "controller as" name in angular js directive breaks function in parent controller
问题描述
我有一个带有 ng-repeat 项目的控制器，每个项目应该是随机颜色，所以我使用 ng-style 在该控制器中有一个名为 randColor（...）的函数。
I've a controller with some items for ng-repeat and each item should get a random color so I use ng-style with a function in that controller called 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 作为我的控制器的简称。即使以相同的方式命名子控制器，我也从来没有遇到过这样的问题。
I'm using the "controller as" syntax for this and I usually always use vm as the short name of my controllers. I've never had a problem with doing so, even when naming "sub"-controllers the same way.
但是现在我试着做同样的事情一个指令突然我的 randColor（...）函数停止工作。
But now I've tried to do the same thing with a directive and suddenly my randColor(...) function stopped working.
Here is a plunker of my problem.
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>'
};
});
输出：
我知道我可以在我的示例中为控制器使用不同的名称，但为什么会在第一时间发生这种情况？
I know I could just use a different name for the controller as in my example, but why does this happen in the first place?
是否有办法让它与相同的名字？
And is there a way to get it working with the same name?
推荐答案
你所面临的问题似乎与指令正在执行的事实有关。与控制器定义为 vm 的范围相同的范围。
The problem you're facing seems to be related to the fact that the directive is being executed on the same scope as the scope where the controller is defined as vm.
您需要做的是创建一个指令范围内的新范围 范围：{} 。
What you need to do is to create a new scope scope: {} within the directive.
app.directive('testDirective', function() {
return {
restrict: 'EA',
scope: {},
controller: 'TestDirectiveController',
controllerAs: 'vm',
bindToController: true,
template: '<div>{{ vm.title }}</div>'
};
});
这样， controllerAs 应创建一个指令范围内的新 vm 属性。
With that, the controllerAs should create a new vm attribute in the directive scope.
这篇关于相同的“控制器” angular js指令中的name会破坏父控制器中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
