为什么我们将控制器变量设置为角度为“this”?

时间:2016-05-04 15:53:23

标签: javascript angularjs this

所以我正在看一个代码学校的例子,在1.5节中保持尖锐的角度。 下面是代码:

angular.module('NoteWrangler')
.controller('NotesIndexController', function($http) {
    var controller = this;
    $http({method: 'GET', url: '/notes'}).success(function(data){
        controller.notes = data;
    })
 });

我阅读了Mozilla的[this] [1]开发者网络指南,但我的理解仍然不是很好。

在以上示例的以下行中。

var controller = this;

为什么我们设置controller =这个?为什么不只是有var控制器;?或者通过设置它等于这使得它成为一个全局变量,否则在成功回调中只会改变它自己的本地控制器变量而不是在控制器中声明的变量?

如果它提供了任何线索,他们稍后会在html中执行以下操作:

<div class="note-wrapper">
    <a class ="card-notes" ng-repeat="notes in indexController.notes">
    </a>
</div>

3 个答案:

答案 0 :(得分:2)

将变量设置为this可以在使用controllerAs语法时添加新的命名空间。

function OneCtrl() {
    this.notes = "foo";
}

function TwoCtrl() {
    this.notes = "bar";
}

<强> HTML:

<div ng-controller="OneCtrl as ctrl1">
    {{ctrl1.notes}}
    <div ng-controller="TwoCtrl as ctrl2">
        {{ctrl2.notes}}
    </div>
</div>

如果没有controllerAs,您必须使用$parent,这实际上是不好的做法。成像必须使用$parent.$parent.$parent.$parent.someValue

进一步阅读:http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/07/02/exploring-angular-s-controller-as-syntax-and-the-vm-variable.aspx

答案 1 :(得分:2)

  

为什么不只有var controller;?

因为这意味着controller将是undefined

var controller;
document.querySelector('pre').innerHTML = controller;
<pre></pre>

  

通过将其设置为等于此使其成为全局变量

您没有创建全局变量,但是您正在创建closed over变量。这意味着您可以在回调中使用该值。为了在回调中使用该值,您需要创建一个闭包变量或绑定该函数。

var controller = {
  hello: 'world'
};

// Just so we have to use a callback
setTimeout(function() {
  console.log(this);
}, 0);

// Using a closure variable
setTimeout(function() {
  console.log(controller);
}, 0);

// Binding a function
setTimeout(function() {
  console.log(this);
}.bind(controller), 0);

答案 2 :(得分:1)

  

通过设置它等于this使其成为一个全局变量,否则在成功回调中只会改变它自己的本地控制器变量而不是控制器中声明的变量?

this的值取决于函数的调用方式。

当你有一个新功能时,你的this里面有一个新值。

将其存储在另一个变量中意味着内部函数可以读取该变量的值(因为它无法访问相同的this)。

它不是一个全球性的,只是一个范围更广的变量。