Angularjs将对象传递给指令

前端之家收集整理的这篇文章主要介绍了Angularjs将对象传递给指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
角新手在这里。我试图找出在将对象传递到指令时发生了什么问题。

这里是我的指令:

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日志作为未定义,而范围日志良好作为一个范围,甚至有一个散步的孩子与我正在寻找的所有数据。

我不知道我在这里做错了,因为这个确切的方法以前为我工作。

编辑:

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

可以看到{{walks}}在范围中可用,但我需要在链接功能中访问它,它仍然记录为未定义。

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

解决你的问题,在你的链接函数$ ​​watch知道什么时候可用数据:

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

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

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

更新:如果您使用的是一个版本的Angular,其中$ resource支持promises,另请参见@ sawe的答案。

原文链接:https://www.f2er.com/angularjs/145626.html

猜你在找的Angularjs相关文章