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

我不确定我在这里做错了什么,因为这个确切的方法以前对我有效.

编辑:

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

正如您所看到的{{walks}},范围内可用,但我需要在链接功能中访问它,它仍然以未定义的方式记录.

Answer 1

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

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

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

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

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

更新:如果您使用的是$resource支持promises 的Angular版本,请参阅@ sawe的回答.

Answer 2

你也可以用

scope.walks.$promise.then(function(walks) {
    if(walks) {
      console.log(walks);
    }
  });