0

我正在开发一个 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> '
    };
});

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

4

1 回答 1

3

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

一个常见的约定是var vm用于“视图模型”，但变量的命名是主观的

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> '
    };
});

流行的角度风格指南

于 2015-07-22T11:23:24.150 回答