提问



在AngularJS主页的创建组件部分中,有一个例子:[67]


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)允许您与$scope方法交替使用this,但现在不再是这种情况了。在范围this$scope上定义的方法内部是可互换的(角集this$scope),但在控制器构造函数中则不然。



this$scope如何在AngularJS控制器中工作?

最佳参考



  this$scope如何在AngularJS控制器中工作?



简短回答:



  • this


    • 调用控制器构造函数时,this是控制器。

    • 当调用$scope对象上定义的函数时,this是调用函数时有效的范围。这可能(或可能不是!)是定义函数的$scope。因此,在函数内部,this$scope可以相同。


  • $scope


    • 每个控制器都有一个关联的$scope对象。

    • 控制器(构造函数)函数负责在其关联的$scope上设置模型属性和函数/行为。

    • 只能从HTML [[视图]]访问此$scope对象上定义的方法(以及父范围对象,如果原型继承正在播放)。例如,来自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中遇到指令的有效范围。)[68]


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


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


嗯,红色虚线就是答案。 addPane()函数的s范围(我在这里指的是JavaScript的函数范围/闭包)给函数访问选项卡隔离$ scope。即,addPane()可以访问tabs IsolateScopein上图是因为在定义addPane()时创建的闭包。(如果我们在tabs $ scope对象上定义了addPane(),则pane指令将无法访问此函数,因此它将无法使用与标签$ 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设置为ChildCtrls $scope。在方法中,$scope仍然是ParentCtrls $范围。


小提琴[69]


我尝试不在$ scope中定义的函数中使用this,因为它会影响哪个$ scope受到影响,特别是考虑到ng-repeat,ng-include,ng-switch和指令都可以创建他们自己的子范围。

其它参考1


addPane分配给它的原因是<pane>指令。


pane指令执行require: '^tabs',它将来自父指令的tabs控制器对象放入链接函数中。


addPane被赋值给this,以便pane链接功能可以看到它。然后在pane链接函数中,addPane只是tabs控制器的一个属性,它只是tabsControllerObject.addPane。所以窗格指令的链接函数可以访问选项卡控制器对象因此访问addPane方法。


我希望我的解释足够清楚......有点难以解释。

其它参考2


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

其它参考3


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


如果通过this方法向控制器添加方法,则必须在视图中使用控制器s name点您的属性或方法调用它。


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


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

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

    </div>

其它参考4


我建议你阅读以下帖子:
http://codetunnel.io/angularjs-controller-as-or-scope/[72]


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


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


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

其它参考5



  以前版本的Angular(1.0 RC之前版本)允许您使用它
  可以与$ scope方法互换,但这不再是
  案件。在范围和$ scope范围内定义的方法内部
  可互换(角度设置为$ scope),但不是
  在你的控制器构造函数中。



要恢复这种行为(有人知道它为什么会改变吗?)你可以添加:


return angular.extend($scope, this);


在控制器功能结束时(前提是$ scope注入此控制器功能)。


这通过控制器对象访问父作用域具有很好的效果,您可以通过require: '^myParentDirective'获取子对象

其它参考6


$ scope有一个不同的this然后是控制器this。因此,如果你把一个console.log(这个)放在控制器里面它给你一个对象(控制器),this.addPane()将addPane方法添加到控制器对象。但$ scope具有不同的范围,其范围内的所有方法都需要由$ scope.methodName()加入。
this.methodName()内部控制器意味着在控制器对象中添加方法。$scope.functionName()是HTML和内部


$scope.functionName(){
    this.name="Name";
    //or
    $scope.myname="myname"//are same}


将此代码粘贴到编辑器中并打开控制台以查看...


 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>this $sope vs controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script>
        var app=angular.module("myApp",[]);
app.controller("ctrlExample",function($scope){
          console.log("ctrl 'this'",this);
          //this(object) of controller different then $scope
          $scope.firstName="Andy";
          $scope.lastName="Bot";
          this.nickName="ABot";
          this.controllerMethod=function(){

            console.log("controllerMethod ",this);
          }
          $scope.show=function(){
              console.log("$scope 'this",this);
              //this of $scope
              $scope.message="Welcome User";
          }

        });
</script>
</head>
<body ng-app="myApp" >
<div ng-controller="ctrlExample">
       Comming From $SCOPE :{{firstName}}
       <br><br>
       Comming from $SCOPE:{{lastName}}
       <br><br>
       Should Come From Controller:{{nickName}}
       <p>
            Blank nickName is because nickName is attached to 
           'this' of controller.
       </p>

       <br><br>
       <button ng-click="controllerMethod()">Controller Method</button>

       <br><br>
       <button ng-click="show()">Show</button>
       <p>{{message}}</p>

   </div>

</body>
</html>