Angularjs将对象传递给指令

发布时间：2020-12-17 08:37:24 所属栏目：安全来源：网络整理

导读：角新手在这里。我试图找出在将对象传递到指令时发生了什么问题。这里是我的指令： app.directive('walkmap',function() { return { restrict: 'A',transclude: true,scope: { walks: '=walkmap' },template: 'div id="map_canvas"/div',link: function(scop

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

这里是我的指令：

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的答案。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!