Question

我刚刚在第2级的angular.js教程中看到了这一点：

(function() {
  var app = angular.module('gemStore', []);

  app.controller('StoreController', function(){
    this.products = gems;
  });

  app.controller("TabController", function(){
    this.tab = 1;

    this.setTab = function(selectedTab){
      this.tab = selectedTab;
    };
  });

  var gems = [// a lot of code here...]
})();

我的疑问是：setTab函数如何改变TabControler的tab变量的值？如果我在setTab函数中使用'this.tab'，setTab函数将只是为它自己的内部范围赋值变量，不是吗？

Answer 1

你必须看看角度如何在内部调用函数 - 它使用类似

的东西

app.controller("TabController").setTab.apply($scope, [selectedTab])

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

它会调用您的setTab函数，但会将this的值设置为$scope对象。

这比那复杂一点，但那就是“如何”。

一般来说，我更喜欢在我的控制器中使用$scope对象，因为它确实不那么“神奇”。

app.controller("TabController", function($scope){
    $scope.tab = 1;

    $scope.setTab = function(selectedTab){
        $scope.tab = selectedTab;
    };
});

有关更多信息，这个问题解释得非常好： 'this' vs $scope in AngularJS controllers

要了解fn.apply的工作原理，这里有一个简单的例子：

x = function() { alert(this.test); } 
x(); //alerts "undefined"
x.apply({test: 'hello!'}); //alerts "hello!"

Answer 2

如果我使用＆＃39; this.tab＆＃39;在setTab函数中，setTab函数会只是为它自己的内部范围分配一个变量，不是吗？

实际上，没有。

this，在您的setTab函数中引用TabController的某个特定实例。因此，this.tab表示＆＃34; TabController实例的tab属性＆＃34;。此实例将由Angular内部创建来处理视图，因此您不必担心此部分。

编辑：

您可以使用此示例：

var MyConstructor = function() { 
    this.tab = 0;
    this.setTab = function(newTab) {
        this.tab = newTab;
    }; 
    this.logTab = function() {
        console.log(this.tab);
    };
};

var myObj = new MyConstructor();
myObj.logTab(); // prints 0
myObj.setTab(2);
myObj.logTab(); // prints 2

但是，正如戴夫所说，我会坚持使用$ scope方法。

angular.js教程的第2级

2 个答案: