AngularJS resource call in directive

Question

I'm trying to create an AngularJS directive that calls a service created using $resource with the value of the attribute in the template and makes the result available in the scope of the element.

I have a very simple service:

services.factory('Concept', ['$resource', function($resource) {
  return $resource('http://example/api/:id');
}]);

And a directive:

directives.directive('anConcept', ['Concept', function(Concept) {
  return {
    scope: {
      anConcept: '@'
    },
    restrict: 'A',
    controller: function($scope, $element) {
      $scope.results = Concept.get({id: concept});
    }
  }
}]);

I then try to invoke this in my view:

<div an-concept="1">
  {{results}}
</div>

Looking at the network pane in my browser's debugger I can see the requests getting made, but the result isn't being made available in the scope of the element.

I'm sure I'm making a very basic mistake but I can't figure out what it is.

JcT · Accepted Answer · 2015-02-10 15:37:33Z

3

Note that when you're working with a $resource, you're receiving back a promise. Additionally, you may be running into some trouble with the results property of your $scope if the directive's scope is isolated.

angular.module('myApp', ['ngResource'])
  .factory('Concept', ['$resource',
    function($resource) {
      return $resource('https://api.stackexchange.com/2.2/info');
    }
  ])
  .directive('anConcept', ['Concept',
    function(Concept) {
      return {
        restrict: 'A',
        link: function($scope, $element, $attrs, $controllers) {
          Concept.get({
            site: $attrs.anConcept
          }, function(results) {
            $scope.results = results.items[0].total_users;
          });
        }
      };
    }
  ]);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.js"></script>
<div ng-app='myApp'>
  <div an-concept="stackoverflow">
    Total stackoverflow users: {{results}}
  </div>
</div>

answered Feb 10, 2015 at 15:37

JcT

3,5691 gold badge27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

Thanks, it was indeed an isolated scope problem.

Jochen van Wylick · Accepted Answer · 2015-02-10 14:35:26Z

1

It's because the result of that get is a promise. You need to do something like:

Concept.get({id: concept}).success(function(data) {
     $scope.results = data;
};

EDIT

Sorry I think I made a mistake, $resource works a bit different then $http :

Concept.get({id: concept}, function(data) {
     $scope.results = data;
};

edited Feb 10, 2015 at 14:35

answered Feb 10, 2015 at 14:29

Jochen van Wylick

5,4015 gold badges46 silver badges66 bronze badges

Comments

Hazarapet Tunanyan · Accepted Answer · 2015-02-10 14:31:08Z

0

If you want to see that value out of directive,I will say that you will not see it as a simple.because your directive is ISOLATED-SCOPE directive.It means your values in that scope will be isolated from parent scope and you will not see that value out of directive(There is a way to get that isolated scope).But if you want to see it in directive,I will say your code is correct code.If response has been accepted,you result will be defined.

answered Feb 10, 2015 at 14:31

Hazarapet Tunanyan

2,85528 silver badges30 bronze badges

Collectives™ on Stack Overflow

AngularJS resource call in directive

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related