AngularJS将对象传递给指令

Question

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

这是我的指令：

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日志罚款的范围，甚至有一个walks与所有的数据，我找孩子。

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

编辑：

我已经用所有必需的代码创建了一个插件：http
://plnkr.co/edit/uJCxrG

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

Answer 1

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

要解决您的问题，请在链接函数$watch中了解何时有可用数据：

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

在生产代码中，请防止未定义代码：

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

更新： 如果您使用$resource支持Promise的Angular版本，另请参阅@sawe的答案。