一尘不染

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

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

编辑:

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

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


阅读 307

收藏
2020-07-04

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

2020-07-04