Question

我有这个说明我的问题：http://plnkr.co/edit/bNha1xOrnhnyhvXtXSnX?p=preview

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.arr = [1,2,3,4];
}])

.directive('myDialog', function() {
  return {
    restrict: 'E',
    scope: {
        arr: '='
    },
    templateUrl: 'my-dialog.html',
    link: function (scope) {
      var lengthOfArray = scope.arr.length;
      scope.test = 'The array length is ' + lengthOfArray;
    }
  };
});

在plunker中，一切都按照我的意愿运行：我设置了scope.arr数组，并在链接中进行调查。这使我有可能在范围（测试）中添加更多内容，并将其打印出来。使用这样的模板：

{{arr}} - {{test}}

..我得到了这个结果：

[1,2,3,4] - The array length is 4

SO：在这个例子中，数组是在上面的控制器上设置的。但在我真正的实现中，数组是一个从服务器获取的json对象。结果是我不断得到“未定义”的结果。我认为这可能是因为指令要求数据时的（小）延迟，直到实际交付，同时指令中的链接无法使用。

我可以尝试任何好的想法吗？

更新

我让这个Plunker展示了问题：

http://plnkr.co/edit/bNha1xOrnhnyhvXtXSnX?p=preview

运行它，然后在结果窗口中，它应该是这样的：

The array length is 5 
(content of array...)

现在，如果你进入script.js（或任何其他文件），并在底部或其他地方添加一个换行符，Plunker将重新加载页面。然后，有时，脚本将无法读取数组，输出将只是：

(content of array...)

我试图添加手表，但不确定我是否正确操作..因为它似乎无法正常工作。

另一个有趣的事情是，这通常会在Plunker上发挥作用。但是在localhost上，这永远不会奏效。

更新2

我已经设法使用$ watch解决了这个问题。更新Plunker以更正解决方案：http://plnkr.co/edit/bNha1xOrnhnyhvXtXSnX?p=preview

.directive('myDialog', function() {
  return {
    restrict: 'E',
    scope: {
       contentOfList: '='
    },
    templateUrl: 'my-dialog.html',
    link: function (scope) {
      scope.counter = 0;
      scope.$watch('contentOfList', function() {
         scope.counter = scope.counter + 1;
         var lengthOfArray = scope.contentOfList.categoryList[0].rows.length;
         scope.test = 'The array length is ' + lengthOfArray;
        });
    }
  };
});

Answer 1

如果您没有先定义它，您可能会遇到一个未定义的错误，因为arr仅在进行调用后创建。您是否尝试创建一个空数组，然后填充它？

类似的东西：

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', '$http', function($scope, $http) {
  $scope.arr = [];
  $http.get("somedata.json").success(function(result) {
      $scope.arr = result;
  });
    }]);

http://plnkr.co/edit/1yt3OSdrrbdTpa6FnWT8?p=preview 希望它有所帮助

Answer 2

有两种方法可以解决这个问题 1）如果您正在使用路由，则应在控制器初始化之前获取数据，如在routeprovider中的resolve函数期间 2）您应该使用手表来监视更改并在其中设置属性

  scope.$watch('arr',function(newvalue,oldvalue){
            if(newvalue===oldvalue){return};
            scope.test=newvalue.length
          },true);

如何调查指令范围？

2 个答案: