Вызов ресурса AngularJS в директиве

Question

Я пытаюсь создать директиву AngularJS, которая вызывает службу, созданную с использованием $resource со значением атрибута в шаблоне и делает результат доступным в области действия элемента.

У меня есть очень простой сервис:

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

И директиву:

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

тогда, когда я пытаюсь вызвать это на мой взгляд:

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

Глядя на сети панели в отладчике моего браузера. Я вижу, как создаются запросы, но результат не доступен в области видимости элемента.

Я уверен, что делаю простую ошибку, но не могу понять, что это такое.

Answer 1

Обратите внимание, что, когда вы работаете с $resource, вы получаете обещание. Кроме того, вы можете столкнуться с некоторыми проблемами с свойством results вашего $scope, если область действия указана изолирована.

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>

Answer 2

Это потому, что результат этого get является обещанием. Вам нужно сделать что-то вроде:

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

EDIT

К сожалению, я думаю, что я сделал ошибку, $resource работает несколько иначе, то $http:

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

Answer 3

Если вы хотите увидеть, что значение из директивы, я скажу, что вы не увидите его простым. Потому что ваша директива - это директива ISOLATED-SCOPE. Это означает, что ваши значения в этой области будут изолированы от родительской области, и вы будете не вижу этого значения из директивы (есть способ получить эту изолированную область). Но если вы хотите увидеть ее в директиве, я скажу, что ваш код является правильным кодом. Если ответ принят, результат будет определен.