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

修改

抱歉，我认为我犯了一个错误，$resource的工作方式与$http有点不同：

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

Answer 3

如果你想从指令中看到那个值，我会说你不会把它看作简单。因为你的指令是ISOLATED-SCOPE指令。这意味着你在那个范围内的值将与父范围隔离你不会在指令中看到这个值（有一种方法可以获得那个孤立的范围）。但是如果你想在指令中看到它，我会说你的代码是正确的代码。如果你的反应被接受，你的结果将是定义

AngularJS资源调用指令

3 个答案: