angular 指令 ng-repeat 范围和服务

Question

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

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

该服务实际上 return 数据和 console.log($scope.currencies) 显示带有货币的对象。但是转发器没有运行ing 并且我没有得到我想要的结果。

我认为这可能是范围问题，但我找不到查看范围本身的方法。（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 fiddle 用于测试它：http://jsfiddle.net/60c0305v/2/

Answer 1

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

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

angular 指令 ng-repeat 范围和服务

angular directive ng-repeat scope and Service

javascript

angularjs

angularjs-directive

angularjs-scope