AngularJS控制器中的'this'与$ scope

Question

在AngularJS主页的"创建组件"部分中,有以下示例:

controller: function($scope, $element) {
  var panes = $scope.panes = [];
  $scope.select = function(pane) {
    angular.forEach(panes, function(pane) {
      pane.selected = false;
    });
    pane.selected = true;
  }
  this.addPane = function(pane) {
    if (panes.length == 0) $scope.select(pane);
    panes.push(pane);
  }
}

注意如何select添加方法$scope,但是addPane添加了方法this.如果我将其更改为$scope.addPane,则代码会中断.

文档说实际上存在差异,但没有提到差异是什么:

以前版本的Angular(pre 1.0 RC)允许您this与该$scope方法互换使用,但现在不再是这种情况了.内的方法上的范围限定this并且$scope是可互换的(角套this到$scope),但是不另外你的控制器构造内部.

如何this和$scope在AngularJS控制器的工作？

Answer 1

"如何this和$scope在AngularJS控制器的工作？"

简短回答:

• this
  • 当调用控制器构造函数时,this是控制器.
  • 当调用在$scope对象上定义的函数时,this是"调用函数时有效的范围".这可能(或可能不是!)$scope是定义函数的.所以,在函数内部,this并且$scope可能不相同.
• $scope
  • 每个控制器都有一个关联$scope对象.
  • 控制器(构造函数)函数负责在其关联的上设置模型属性和函数/行为$scope.
  • 只能$scope在HTML /视图中访问在此对象上定义的方法(以及父范围对象,如果是原型继承).例如,来自ng-click,过滤器等

答案很长:

控制器函数是JavaScript构造函数.当构造函数执行时(例如,当视图加载时),this(即,"函数上下文")被设置为控制器对象.所以在"tabs"控制器构造函数中,当创建addPane函数时

this.addPane = function(pane) { ... }

它是在控制器对象上创建的,而不是在$ scope上创建的.视图无法看到addPane函数 - 它们只能访问$ scope上定义的函数.换句话说,在HTML中,这将不起作用:

<a ng-click="addPane(newPane)">won't work</a>

执行"tabs"控制器构造函数后,我们有以下内容:

黑色虚线表示原型继承 - 原型继承自Scope的隔离范围.(它没有原型地继承HTML中遇到指令的有效范围.)

现在,窗格指令的链接函数想要与tabs指令进行通信(这实际上意味着它需要以某种方式影响选项卡隔离$ scope).可以使用事件,但另一种机制是使窗格指令require成为选项卡控制器.(对于require制表符$ scope ,窗格指令似乎没有机制.)

因此,这就引出了一个问题:如果我们只能访问选项卡控制器,那么我们如何访问选项卡隔离$ scope(这是我们真正想要的)？

嗯,红色虚线就是答案.addPane()函数的"范围"(我指的是JavaScript的函数范围/闭包)给函数访问选项卡隔离$ scope.即,addPane()可以访问上图中的"tabs IsolateScope",因为在定义addPane()时创建了一个闭包.(如果我们在选项卡$ scope对象上定义了addPane(),则窗格指令将无法访问此函数,因此它无法与选项卡$ scope通信.)

要回答问题的其他部分how does $scope work in controllers?:

在$ scope中定义的函数内,this设置为"调用函数时/当有效的$ scope".假设我们有以下HTML:

<div ng-controller="ParentCtrl">
   <a ng-click="logThisAndScope()">log "this" and $scope</a> - parent scope
   <div ng-controller="ChildCtrl">
      <a ng-click="logThisAndScope()">log "this" and $scope</a> - child scope
   </div>
</div>

而且ParentCtrl(Solely)有

$scope.logThisAndScope = function() {
    console.log(this, $scope)
}

单击第一个链接将显示this并且$scope是相同的,因为" 调用函数时生效的范围"是与之关联的范围ParentCtrl.

点击第二个链接将揭示this和$scope是不一样的,因为" 有效范围时调用函数 "是与相关的范围ChildCtrl.所以在这里,this设置为ChildCtrl's $scope.在方法内部,$scope仍然ParentCtrl是$ $范围.

小提琴

我尝试不在this$ scope中定义的函数内部使用,因为令人困惑的是哪个$ scope受到影响,特别是考虑到ng-repeat,ng-include,ng-switch和指令都可以创建自己的子作用域.

Answer 2

"addPane"分配给它的原因是因为该<pane>指令.

该pane指令require: '^tabs'将来自父指令的tabs控制器对象放入链接函数中.

addPane被分配,this以便pane链接功能可以看到它.然后在panelink函数中,addPane它只是tabs控制器的一个属性,它只是tabsControllerObject.addPane.因此,pane指令的链接功能可以访问tabs控制器对象,从而访问addPane方法.

我希望我的解释很清楚......这很难解释.

Answer 3

我刚刚阅读了关于两者之间差异的一个非常有趣的解释,并且越来越倾向于将模型附加到控制器并且将控制器别名为控制器以将模型绑定到视图.http://toddmotto.com/digging-into-angulars-controller-as-syntax/是这篇文章.他没有提到它,但是在定义指令时,如果你需要在多个指令之间共享某些内容并且不需要服务(存在服务麻烦的合法情况),那么将数据附加到父指令的控制器.$ scope服务提供了大量有用的东西,$ watch是最明显的,但如果你只需要将数据绑定到视图,那么在模板中使用普通控制器和'controller as'是可以的,并且可以说是更好的选择.

Answer 4

我建议你阅读以下帖子: AngularJS:"Controller as"或"$ scope"？

它很好地描述了使用"Controller as"在"$ scope"上公开变量的优点.

我知道你具体问过方法而不是变量,但我认为最好坚持使用一种技术并与之保持一致.

所以我认为,由于帖子中讨论的变量问题,最好只使用"Controller as"技术并将其应用于方法.

Answer 5

在本课程(https://www.codeschool.com/courses/shaping-up-with-angular-js)中,他们解释了如何使用"this"和许多其他内容.

如果通过"this"方法向控制器添加方法,则必须在视图中使用控制器名称"dot"将其称为属性或方法.

例如,在视图中使用您的控制器,您可能有这样的代码:

    <div data-ng-controller="YourController as aliasOfYourController">

       Your first pane is {{aliasOfYourController.panes[0]}}

    </div>