问题描述
几个月前，我读这篇文章关于不使用NG-控制器并通过它背后的理念：那棱角分明的应用程序应该是套在一起工作的部件
A few months back I read this article about not using ng-controller and adopted the idea behind it: that angular apps should be sets of components working together.
其基本思想是，你会使用隔离范围指令用自己的控制器是这样的：
The basic idea was that you would use isolate scope directives with their own controllers like this:
.directive('myAppContestantList', function() {
return {
scope: {},
templateUrl: 'my_app_contestant_list.html',
replace: true,
controller: 'ContestantListCtrl',
controllerAs: 'ctrl'
};
})
.controller('ContestantListCtrl', function() {
this.contestants = [
{firstName: 'Rachel', lastName: 'Washington'},
{firstName: 'Joshua', lastName: 'Foster'},
{firstName: 'Samuel', lastName: 'Walker'},
{firstName: 'Phyllis', lastName: 'Reynolds'}
];
});
和，而不是让你在你的控制器 $范围数据属性，使得它这个（这个作为控制器本身）。在控制器上定义的变量意味着你可以只用$ P $与 CTRL pfixing数据引用你的HTML数据，因为这是你放什么在 controllerAs 字段：
and instead of making your a data property of $scope in your controller, you made it a property of this (this being the controller itself). Defining variables on the controller meant you could reference your data in your html just by prefixing your data with ctrl because that's what you put in the controllerAs field:
<li ng-repeat="contestant in ctrl.contestants">
{{contestant.firstName}} {{contestant.lastName}}
</li>
这工作完全对我很好，我也开始筑巢指令代替嵌套控制器，解决了嵌套的 $范围的问题。
This worked perfectly fine for me, and I began nesting directives instead of nesting controllers, which solved the nested $scope problem.
在这种背景下，我不明白是为什么文章倡导者定义你的控制器上，而不是在 $范围变量。这是真的，previously $范围是一个巨大的问题，因为一旦你已经嵌套的范围，将是一个烂摊子，但使用它主张孤立范围指令的模式，变量在 $范围内定义永不渗漏。
Given that background, what I don't understand is why the article advocates defining variables on your controller instead of on $scope. It's true that previously $scope was a huge problem because once you had nested scopes it would be a mess, but using the pattern it advocates of isolated scope directives, variables defined on $scope never leak.
您也绝不会发现自己的位置，会有模板多个控制器，以便 controllerAs 好像没用也是如此。
You would also never find yourself in the position where there would be more than one controller in the template so controllerAs seems useless as well.
我是非常成功的使用模式与我的控制器上定义的变量几个月之后这样说。我只是想知道，如果/为什么它更好地做到这一点比定义它们在$范围，而不是与文章一起盲从的。
I say this after being very successful using the pattern for a few months with variables defined on my controller. I'd just like to know if/why it's better to do that than define them on $scope instead of blindly following along with the article.
是否可能有 bindToController ？
有人能指出我在正确的方向？
Could someone point me in the right direction?
推荐答案
这是事实，controllerAs +这个配方主要针对复杂的模板，引入多个 NG-控制器和其他内置指令，所以控制器标识符处理范围的继承相当不错。
It is true that 'controllerAs + this' recipe is primarily targeted at complex templates that introduce multiple ng-controller and other built-in directives, so controller identifiers deal with scope inheritance quite nicely.
与另一侧隔离范围指令假设属性主要用于与父范围进行交互，它将产生一个范围继承任何问题，而 $范围感觉自己伟大那里。
Directives with isolated scope on the other side assume that attributes are primarily used to interact with parent scope, it raises no issues with scope inheritance, and $scope feels itself great there.
在第二种情况下是不现实摆脱 $范围只是为了让code看起来更像Angular2，AngularJS在设计时后范围记住所有。那是在问题中提到的文章是过分热心范围迫害的一个很好的例子，它得到了太多的关注IMO于社会。
In the second case it is unpractical to get rid of $scope just to make the code look more like Angular2, AngularJS was designed with scope in mind after all. The article that was mentioned in the question is a good example of overzealous scope persecution, it got too much attention in the community IMO.
下面是一个指令一个简洁的例子：
Here is a concise example of a directive:
app.directive('isolated', function () {
return {
scope: {
'isolated': '@'
},
template: '{{::data}}',
controller: function ($scope) {
$scope.data = $scope.isolated + '!';
},
link: function (scope, element) {
element.append("<br>DOM " + scope.data);
}
};
});
和指令通过一切手段消除'范围'可以'提高'：
And the directive can be 'improved' by eliminating 'scope' by all means:
app.directive('isolated', function () {
return {
scope: { // yikes!
'isolated': '@'
},
template: '{{::vm.data}}',
controller: function () {
this.data = this.isolated + '!';
},
controllerAs: 'vm',
bindToController: true,
link: function (s___e, element, attrs, ctrl) {
element.append("<br>DOM " + ctrl.data);
}
};
});
由于 bindToController 就显得有点更简洁，只有模板与污染控制标识。这个转变看起来无用的，但如果有机会，模板将结束与一帮 NG-重复取值一段时间可能会被保存。
Due to bindToController it becomes a little less verbose, and only the template is polluted with controller identifiers. This transformation looks useless but some time may be saved if there's a chance that the template will end up with a bunch of ng-repeats.
有可能是其他不明显的用例两种语法。例如。控制器这个语句can被抽象为服务毫不费力分开（但零星 $范围。$ ... 是一个煞风景）。
There may be other unobvious use cases for both syntaxes. E.g. controller this statements can be abstracted to separate service with zero effort (but sporadic $scope.$... is a killjoy).
TL; DR：这个效果最好连同 controllerAs 语法如果code依赖于' HTML编程和继承范围的指令，但很少在应用是由孤立范围的网络状组件的指令是必须的，记错。
TL;DR: this works best in conjunction with controllerAs syntax if the code relies on 'HTML programming' and directives with inherited scopes, but it is rarely a must when app is composed of web component-like directives with isolated scopes, methinks.
这篇关于在隔离范围指令是有关于范围定义变量，并在控制器上定义变量之间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！