this reference in callback with controllerAs-Syntax

Question

我正在做一个 angularjs 项目，我正在尝试尽可能接近 angularjs 2.

在 angularjs 2 中将不再有 ng-controller 和 $scope，所以我使用指令而不是 ng-controller。此外，我试图通过使用 controllerAs 语法来避免使用 $scope。

我的指令看起来像这样：

angular.module('myApp').directive('myDirective', function() {
    return {
        controller: function() {
            this.data = '123';
        },
        controllerAs: 'ctrl',
        template: ' <p>{{ctrl.data}}</p> '
    };
});

到目前为止一切正常。当我试图在回调函数中调用控制器上的方法或属性时，问题就开始了。在这种情况下 'this' 不再引用实际的控制器实例。

示例：

angular.module('myApp').directive('myDirective', function($http) {
    return {
        controller: function() {
            this.data = '';

            this.loadData = function(){
                $http.get("someurl.com")
                .success(function(response) {
                    this.data = response.data; // --> this doesn't work
                 });
            }

            this.loadData();
        },
        controllerAs: 'ctrl',
        template: ' <p>{{ctrl.data}}</p> '
    };
});

有没有办法在回调中获取对我的控制器实例的引用，以便我可以在回调中使用控制器的方法和属性？

Answer 1

您需要做的是在控制器开头的变量中存储对 this 的引用...然后将您的属性添加到该变量。这样上下文就不会在回调中丢失。

一个常见的约定是使用 var vm 作为 "View Model" 但变量的命名是主观的

angular.module('myApp').directive('myDirective', function($http) {
    return {
        controller: function() {
            var vm = this;

            vm.data = '';

            vm.loadData = function(){
                $http.get("someurl.com")
                .success(function(response) {
                    vm.data = response.data; 
                 });
            }

            vm.loadData();
        },
        controllerAs: 'ctrl',
        template: ' <p>{{ctrl.data}}</p> '
    };
});

热门angular style guide

this reference in callback with controllerAs-Syntax

this reference in callback with controllerAs-Syntax

angularjs

angularjs-directive

angularjs-controlleras