angular directive ng-repeat scope and Service

Wazime

I am trying to create angular directive whom can run alone without a Controller, so I can set it anywhere I want, without adding the model to the controller. The code is fairly simple:

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

The Service actually return the data and the console.log($scope.currencies) shows object with the currencies. but the repeater is not runing and I am not getting the result I want.

I thought this might be a scope problem, but I can't find a way to see the scope itsel. (angularjs batarang is not working in version 1.3+)

the problem can be in the Service as well so I am giving the service code:

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

here is a JS fiddle for testing it: http://jsfiddle.net/60c0305v/2/

eladcon

Your service returns a promise, not the data itself. You need to set a function for when the service resolves the promise:

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

Check this fiddle

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

How to access ng-repeat item object into directive and child scope?

분류에서Dev

Angular Directive needs access to variable in ng-repeat

분류에서Dev

Angular directive modifying scope

분류에서Dev

ng-repeat of a directive and $validators

분류에서Dev

Angular select within a ng-repeat directive: how can I access the children scopes?

분류에서Dev

How can I pass a filter into an angular directive to be used in an ng-repeat?

분류에서Dev

How do I pass a function to an angular directive inside ng-repeat (arg is undefined)?

분류에서Dev

ANgularjs: ng-repeat and nested custom directive

분류에서Dev

ng-repeat의 $ scope.variable

분류에서Dev

angular ng-repeat with condition

분류에서Dev

angular filter for the ng-repeat

분류에서Dev

Angular.js directive isolated scope not working

분류에서Dev

Angular.js directive isolated scope not working

분류에서Dev

angular directive - scope undefined inside function

분류에서Dev

Angular $ scope.model은 ng-repeat에 바인딩되지 않습니다.

분류에서Dev

AngularJs using ng-repeat in a directive gives type error

분류에서Dev

Getting Attribute value in ng-repeat from a Directive

분류에서Dev

Define a function for ng-click in an Angular directive

분류에서Dev

How to call scope function with data from ng-repeat?

분류에서Dev

Angular Directive 범위 바인딩이 ng-repeat에서 작동하지 않습니다.

분류에서Dev

Angular Directive 범위 바인딩이 ng-repeat에서 작동하지 않습니다.

분류에서Dev

angular.js ng-repeat with arrays

분류에서Dev

Angular ng-repeat with routeParams and nested array

분류에서Dev

Angular - Data Returned But ng-repeat Not Displaying It

분류에서Dev

Angular ng-repeat animate once

분류에서Dev

Angular Ng-Repeat First Of Type

분류에서Dev

How to create a custom directive for ng-table (using different data for the table and ng-repeat)

분류에서Dev

AngularJS: directive with HTML and angular expressions, "compile" the contents with the outer scope

분류에서Dev

Ionic / Angular.js $ scope가 ng-repeat없이 값을 전달하지 않습니다.

Related 관련 기사

  1. 1

    How to access ng-repeat item object into directive and child scope?

  2. 2

    Angular Directive needs access to variable in ng-repeat

  3. 3

    Angular directive modifying scope

  4. 4

    ng-repeat of a directive and $validators

  5. 5

    Angular select within a ng-repeat directive: how can I access the children scopes?

  6. 6

    How can I pass a filter into an angular directive to be used in an ng-repeat?

  7. 7

    How do I pass a function to an angular directive inside ng-repeat (arg is undefined)?

  8. 8

    ANgularjs: ng-repeat and nested custom directive

  9. 9

    ng-repeat의 $ scope.variable

  10. 10

    angular ng-repeat with condition

  11. 11

    angular filter for the ng-repeat

  12. 12

    Angular.js directive isolated scope not working

  13. 13

    Angular.js directive isolated scope not working

  14. 14

    angular directive - scope undefined inside function

  15. 15

    Angular $ scope.model은 ng-repeat에 바인딩되지 않습니다.

  16. 16

    AngularJs using ng-repeat in a directive gives type error

  17. 17

    Getting Attribute value in ng-repeat from a Directive

  18. 18

    Define a function for ng-click in an Angular directive

  19. 19

    How to call scope function with data from ng-repeat?

  20. 20

    Angular Directive 범위 바인딩이 ng-repeat에서 작동하지 않습니다.

  21. 21

    Angular Directive 범위 바인딩이 ng-repeat에서 작동하지 않습니다.

  22. 22

    angular.js ng-repeat with arrays

  23. 23

    Angular ng-repeat with routeParams and nested array

  24. 24

    Angular - Data Returned But ng-repeat Not Displaying It

  25. 25

    Angular ng-repeat animate once

  26. 26

    Angular Ng-Repeat First Of Type

  27. 27

    How to create a custom directive for ng-table (using different data for the table and ng-repeat)

  28. 28

    AngularJS: directive with HTML and angular expressions, "compile" the contents with the outer scope

  29. 29

    Ionic / Angular.js $ scope가 ng-repeat없이 값을 전달하지 않습니다.

뜨겁다태그

보관