Question

我正在尝试创建可以在没有Controller的情况下单独运行的角度指令，因此我可以将其设置在我想要的任何地方，而无需将模型添加到控制器。代码很简单：

App.directive('ngdPriceWithCurrencySelect',['CurrenciesService' ,function (CurrenciesService) {
    return {
        restrict: 'E',
        replace: true,
        scope: true,
        link: function ($scope, $element, $attrs) {
            $scope.currencies = CurrenciesService.getData();
            $scope.$watch('currencies', function(newValue, oldValue){
                console.log($scope.currencies);
            });
        },
        template: '<select>\n\
                    <option ng-repeat="currency in currencies">{{currency.cur_name_he}}</option>\n\
                </select>'
    }
}]);

服务实际返回数据，console.log($scope.currencies)显示货币对象。但转发器没有运行，我没有得到我想要的结果。

我认为这可能是一个范围问题，但我无法找到一种方法来查看范围。（angularjs batarang在版本1.3 +中不起作用）

问题可能出现在服务中，所以我提供服务代码：

App.service('CurrenciesService', ["$http", "$q", function ($http, $q) {
        var service = {
            returnedData: [],
            dataLoaded: {},
            getData: function (forceRefresh) {
                var deferred = $q.defer();
                if (!service.dataLoaded.genericData || forceRefresh){
                    $http.get("data/currencies").success(function (data) {
                        angular.copy(data, service.returnedData)
                        service.dataLoaded.genericData = true;
                        deferred.resolve(service.returnedData);
                    });
                }
                else{
                    deferred.resolve(service.returnedData);
                }
                return deferred.promise;
            },
        };
        service.getData();
        return service;
    }]);

这是一个用于测试它的JS小提琴：http://jsfiddle.net/60c0305v/2/

Answer 1

您的服务返回承诺，而不是数据本身。您需要为服务解析承诺时设置一个函数：

link: function ($scope, $element, $attrs) {
    // waiting for the service to resolve the promise by using the done method 
    CurrenciesService.getData().then(function(data) {
        $scope.currencies = data;
    });
    $scope.$watch('currencies', function(newValue, oldValue){
        console.log($scope.currencies);
    });
}

检查this fiddle

角度指令ng-repeat范围和服务

1 个答案: