Angularjs 将对象传递给指令

Question

Angular 新手在这里。我试图找出将对象传递给指令时出了什么问题。

这是我的指令:

app.directive('walkmap', function() { 
  return {
    restrict: 'A',
    transclude: true,
    scope: { walks: '=walkmap' },
    template: '<div id="map_canvas"></div>',
    link: function(scope, element, attrs)
    {
      console.log(scope);
      console.log(scope.walks);
    }
  };
});

这是我调用指令的模板:

<div walkmap="store.walks"></div>

store.walks是一个对象数组。

当我运行这个时， scope.walks记录为 undefined而 scope作为 Scope 记录很好，甚至还有 walks拥有我正在寻找的所有数据的 child 。

我不确定我在这里做错了什么，因为这个确切的方法以前对我有用。

编辑:

我已经创建了一个带有所有必需代码的plunker: http://plnkr.co/edit/uJCxrG

如您所见 {{walks}}在范围内可用，但我需要在链接函数中访问它，它仍然记录为未定义。

Answer 1

由于您使用的是 $resource为了获取你的数据，指令的链接函数在数据可用之前运行(因为来自 $resource 的结果是异步的)，所以第一次在链接函数 scope.walks 中将为空/未定义。由于您的指令模板包含 {{}} s、Angular 设置了 $watch在 walks ，所以当 $resource填充数据，$watch触发和显示更新。这也解释了为什么您会在控制台中看到步行数据——当您单击链接以扩展范围时，数据已填充。

要解决您的问题，请在您的链接功能中 $watch了解数据何时可用:

scope.$watch('walks', function(walks) {
   console.log(scope.walks, walks);
})

在您的生产代码中，只需防止它未定义:

scope.$watch('walks', function(walks) {
  if(walks) { ... }
})

更新:如果您使用的是 Angular 版本，其中 $resource支持 promise ，另见@sawe 的回答。