Question

我在博客中听说，准备Angular 2.0的一个简单方法是不在控制器中使用 $ scope ，而是使用 this 。我发现在控制器内部的函数中使用的 this 不是 this ，应该是 $ scope

失败

var loginControllerId = 'loginCtrl';
app.controller(loginControllerId, ['$scope',function ($scope) {
    this.login = {};
    function myFunc(){
        // FAILS - this.login is undefined I think because "this" is now referring to the myFunc function
        this.login.message = "Some Message"; 
    }
    this.login.successMessage = "Success";  // PASSES        
});

我认为解决方法是创建一个var并将 this（$ scope）设置为它。有人可以告诉我这是否是一个很好的方法，或者如果有一种不同的方法来全局使用控制器这个？

代用证

var loginControllerId = 'loginCtrl';
app.controller(loginControllerId, ['$scope',function ($scope) {
    var loginScope = this;
    loginScope.login = {};
    function myFunc(){
        // PASSES
        loginScope.login.message = "Some Message"; 
    }
    loginScope.login.successMessage = "Success";  // PASSES        
});

Answer 1

在控制器中使用类似var vm = this;的内容很常见。查看非常受欢迎的styleguide by John Papa。

Answer 2

另一种方法是使用角度扩展

function MainCtrl () {
  angular.extend(this, {
    someVar: {
      name: 'Todd'
    },
    anotherVar: [],
    doSomething: function doSomething() {

    }
  });
}

请看这篇文章以获得完整的解释

https://toddmotto.com/a-better-way-to-scope-angular-extend-no-more-vm-this/

正确的方法在控制器中使用它

2 个答案: