Question

我正在开发一个angularjs项目，我正试图尽可能接近angularjs 2来实现它。

在angularjs 2中，将不再有ng-controller和$ scope，所以我使用的是指令而不是ng-controller。另外，我试图通过使用controllerAs-syntax来避免使用$ 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用于“视图模型”，但变量的命名是主观的

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

使用controllerAs-Syntax

1 个答案: