Question

关于使用ui-router时的$scope和this，

如果我使用controllerAs语法，即：

.config(['$stateProvider', function($stateProvider) {
    $stateProvider
        .state('app.login', {
            url: '/login',                  
            templateUrl: 'modules/login/login.html',
            controllerAs: 'login',
            controller: 'LoginCtrl',
            data: {
                authorizedRoles: [USER_ROLES.all]
            }
        });
}])

在我的控制器中，我使用的是this而不是$scope。所以我的登录控制器中有这样的代码：

this.func1 = func1;
this.func2 = func2;
this.message = "Hello world!";

但我也使用$scope收听我$rootScope的全球广播事件，因为如果我没记错，this没有属于$scope的方法即使他们正在互换。

$scope.$on('event', handler);

所以我正在收听$rootScope广播的事件，并在广播此事件时调用其他控制器逻辑，如func2：

$scope.$on('auth-login-failed', function(event) {
// call some other function in controller
});

如果我想在func2处理程序中调用$on该怎么办？我应该做一些约会，我在控制器中初始化这样的东西吗？

var that = this;

$scope.$on('auth-login-failed', function(event) {
    this.func2();
});

我只是对最好的进行方式感到好奇，这里的一般惯例是什么。使用$scope和this是否合适，两者之间的主要区别是什么，因为它们可以互换？

Answer 1

您的建议也将逻辑上下文保留在某个变量中 - 非常好，并且是良好的实践：

var _this = this;

$scope.$on('auth-login-failed', function(event) {
    _this.func2();
});

事实上，这就是 Typescript 在我们这个场景背后的方式。它被称为

Arrow function

并且在打字稿中看起来像这样：

$scope.$on('auth-login-failed', (event) => {
    this.func2();
});

因为场景后面的Typescript编译器将执行上述技巧，逻辑范围保存在某个变量中。

我建议你：

...尽力开始使用Typescript。 无论如何，这是角度世界的未来......

有一些链接指向如何在controller中创建角度Typescript的一些细节，包括工作示例

在Angular UI Router的控制器中使用$ scope和'this'

1 个答案:

Arrow function