角度指令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>'
    }
}]);

該服務實際上返回數據， 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);
    });
}

檢查這個小提琴