angularjs - angularj控制器this vs $scope

  显示原文与译文双语对照的内容

在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 以前的版本允许你使用 this ( 前 1.0 RC ) 与 $scope 法混用,但这已经不再是这种情况。 在作用域 this$scope 上定义的方法内部是可以互换的( Angular 将 this 设置为 $scope ),但在你的控制器构造函数中不存在。

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

时间:

'addPane'被指派给这是因为 <pane> 指令。

pane 指令执行 require:'^tabs',将选项卡控制器对象从父指令放入到链接函数中。

addPane 被分配给 this,这样 pane 链接函数就可以。 然后在 pane 链接的作用,addPane 只是一个资产 tabs 控制器,然后它只是 tabsControllerObject.addPane 。 所以链接函数的窗格可以访问选项卡控制器对象,因此访问addPane方法。

我希望我的解释足够清晰。 这很难解释。

在这个 course( https://www.codeschool.com/courses/shaping-up-with-angular-js ) 中,他们解释了如何使用"这个"和其他许多东西。

如果通过"这个"方法向控制器添加方法,则必须在具有控制器名称的视图中调用它。

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


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

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

 </div>

以前版本的Angular ( 前 1.0 RC ) 允许你与 $scope 方法互换使用这里方法,但这不再是。 在作用域定义的方法内,这个和 $scope 是可以互换的( Angular 将这个设置为 $scope),,但在控制器构造函数中不存在) 。

要返回这里行为,你可以添加:


return angular.extend($scope, this);

在控制器函数( 如果 $scope 被注入这个控制器函数)的末尾。

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

据我所知,每个人都知道函数中的this 是什么。 this 引用在其中写入 this的函数的调用方。

当你想使任何变量/函数可以用于与控制器关联的view(html) 时,使用 $scope,然后使用 $scope ( 用于数据绑定) 。

在其中 this 是 written, 什么时候使用 thisthis 指的是对象,它完全调用该函数关系

...