这里有角的新手。我试图找出将对象传递给指令时出了什么问题。
这是我的指令:
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 是一组对象。
store.walks
当我运行此,scope.walks日志,undefined而scope日志罚款的范围,甚至有一个walks与所有的数据,我找孩子。
scope.walks
undefined
scope
walks
我不确定我在这里做错了什么,因为这种确切的方法以前对我有用。
编辑:
我已经用所有必需的代码创建了一个插件:http ://plnkr.co/edit/uJCxrG
如您所见{{walks}},该作用域在范围中可用,但我需要在仍记录为未定义的链接函数中访问它。
{{walks}}
由于您正在使用$resource获取数据,因此伪指令的链接函数在数据可用之前就已运行(因为来自的结果$resource是异步的),因此链接函数中的第一次scope.walks将为空/未定义。由于指令模板包含{{}}s,因此Angular会设置$watchon walks,因此,当$resource填充数据时,$watch触发器和显示将更新。这也解释了为什么您会在控制台中看到步行数据- 当您单击链接以扩大范围时,将填充数据。
$resource
{{}}
$watch
要解决您的问题,请在链接函数$watch中了解何时有可用数据:
scope.$watch('walks', function(walks) { console.log(scope.walks, walks); })
在生产代码中,请防止未定义代码:
scope.$watch('walks', function(walks) { if(walks) { ... } })
更新: 如果您使用$resource支持Promise的Angular版本,另请参阅@sawe的答案。