Question

以下是代码：

var app = angular.module('componentsApp', []);

app.directive('components', ["$http", function($http) {
    return {
        restrict: 'E',
        templateUrl: "component.html",
        controller: function() {
            this.heading = "Available Data";
            this.results= [];

            $http.get("data.json").success(function(data) {
                this.results = data;
            });
        },
        controllerAs: 'component'
    };
}]);

Components.html

<h3>{{ component.heading }}</h3>
<div ng-repeat="result in component.results">
    <span>{{ result.name }}</span>
    <span>{{ result.description }}</span>
</div>

当我运行它时，icons变量显示为空。我想这会与指令构造元素时存在的数据问题有关，因为$ http调用使用了promises。

任何人都可以证实吗？如果是这样，解决方案是什么？

Answer 1

问题是当你在this.results = data;的回调中执行：$http时，这不是指你的控制器，而是指回调范围。所以你可以尝试这样的事情：

app.directive('components', ["$http", function($http) {
    return {
        restrict: 'E',
        templateUrl: "component.html",
        controller: function() {
            var vm = this;
            vm.heading = "Available Data";
            vm.results= [];

            $http.get("data.json").success(function(data) {
                vm.results = data;
            });
        },
        controllerAs: 'component'
    };
}]);

$ http调用不会将任何数据返回给元素

1 个答案: