Question

我正在创建一个AngularJS指令，以便使用D3渲染可视化，但在设置$watch时我遇到了问题。我的大多数东西看起来与AngularJS教程非常相似。我的资源配置在一个名为resources.json的文件中，我确信它正确地返回。

这是我到目前为止的相关代码：

app.js

var resourceApp = angular.module("resourceApp", [
    'ngRoute',
    'resourceControllers',
    'resourceDirectives',
    'resourceServices'
]);

/* ... routing config ... */

controllers.js

var resourceControllers = angular.module('resourceControllers', []);

resourceControllers.controller("OverviewCtrl", [ '$scope', 'Resource',
    function($scope, Resource) {
        $scope.resources = Resource.query();
    }
]);

/* ... other controllers ... */

directives.js

var resourceDirectives = angular.module('resourceDirectives', []);

resourceDirectives.directive("resourceVisualization", function() {
   return {
      restrict: 'E',
      scope: {
          resources: '='
      },
      link: function(scope, el, attrs) {
          // svg setup is here

          scope.$watch("resources", function(nRes, oRes) {
              if (nRes) {
                 // this logs an array of Resource objects 
                 //(once expanded in Firebug)
                 console.log(nRes);

                 var cats = nRes.map(function(r) { return r.category; });
                 // this logs an empty array
                 console.log(cats);
               }
           });
      }
   };
 });

overview.html

<ul>
   <li ng-repeat="resource in resources">
      {{resource.name}}
   </li>
</ul>
<resource-visualization resources="resources"></resource-visualization>

resources.json（这是services.js配置为从中拉出来的）

[
 {
   "id": 1,
   "category": "test",
   "type": "sample",
   "name": "Test1"
 },
 {
   "id": 2,
   "category": "test",
   "type": "sample4",
   "name": "Test2"
 },
 {
   "id": 3,
   "category": "fake",
   "type": "sample1",
   "name": "Test3"
 },
 {
   "id": 4,
   "category": "new",
   "type": "sample2",
   "name": "Test4"
 }]

现在，我知道REST调用正在运行，因为<ul>已填充。但是，在指令中，日志记录语句返回空数组。我知道$resource的异步性，但$watch中首先记录的对象包含$resolved: true。

我错过了什么吗？

Answer 1

一切都很好。您对Resource.query()的调用会立即返回一个空数组。如果ajax调用返回实际数据，则数组将填充到达的数据。因此，$scope.resources的第一个赋值会使用空数组触发$watch函数。如果您使用$watchCollection功能，我可以解决您的问题。有关详细信息，请参阅http://docs.angularjs.org/api/ng.$rootScope.Scope。

为什么我的$ watch显示一个看似空的数组？

1 个答案: