CODEWITHSUNDEEP
angularjs
Alex
Alex

Reputation: 199

AngularJS resource call in directive

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.

Upvotes: 1

Views: 2245

Answers (3)

JcT
JcT

Reputation: 3569

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>

Upvotes: 3

Jochen van Wylick
Jochen van Wylick

Reputation: 5401

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

Upvotes: 1

Hazarapet Tunanyan
Hazarapet Tunanyan

Reputation: 2865

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.

Upvotes: 0

Related Questions