我试图跟随
this SO answer explaining how to render a recursive JSON structure using a directive.但是,与提供的答案不同,当DOM被加载并且Angular第一次运行时,我的数据是不知道的.
相反,我的数据从HTML输入字段中检索并存储在Angular服务中(用户提交表单时).
当服务的数据被修改时,如何保持角度指令是最新的？
更新响应回答
@musically_ut提供了一个很好的答案,有助于,但揭示了一个相关的问题,阻止实施(在这里更新).
该指令呈现包含角度{{表达式}}的HTML,它访问存储在$scope中的数据.由于原始解决方案是在服务已准备好数据时执行$watch.在指令呈现之前,如何确保将“新”数据添加到$范围？
架构和流程概述如下：
> ControllerA – >从用户获取输入
> ControllerA – >使用服务来转换数据
> ControllerB – > $观看服务变更
>指令 – > $观看服务变更
> ControllerB – >将数据添加到$scope
>指令 – >显示已转换的数据(来自服务)使用
指令
问题出现在步骤5和6之间.在ControllerB将数据添加到$scope之前,该指令呈现{{表达式}}.即使这样做,它感觉方式太复杂和“黑客”.
实际上,为了回归,我在ControllerB中使用$watch来监听变换后的数据是否准备就绪.即使这感觉有点过分(服务不会进行异步调用).
您可以在定义指令时注入服务,然后在数据上设置$watch.所以在你的情况下：
原文链接：https://www.f2er.com/angularjs/143235.html.directive('tree',function ($compile,myService) {
return {
// ...
link: function (scope,element,attrs) {
scope.$watch(function () {
return myService.getData();
},function (newVal) {
if (typeof newVal !== 'undefined') {
// ...
}
}
});
}
});
这将监视数据进行更改,并在数据更改时运行代码.
然而,如果数据在设置一次后没有更改,更好的方法(更有效)将是从服务返回承诺($http方法直接返回承诺或您可以使用$q服务创建一个),然后将您的计算添加为数据的延续.
.directive('tree',attrs) {
myService.getData().then(function (data) {
// ...
},function (err) {
// Handle error
});
}
}
});
