angularjs - 服务更改时更新 Angular JS 指令

Question

我正在尝试关注 this SO answer explaining how to render a recursive JSON structure using a directive .但是，与提供的答案不同，我的数据是 不是 知道何时加载 DOM 并且 Angular 第一次运行。

相反，我的数据是从 HTML 输入字段中检索并存储在 Angular 服务中(当用户提交表单时)。

当服务的数据被修改时，如何使 Angular 指令保持最新？

更新响应回答

@musically_ut 提供了一个很好的答案，它有所帮助，但揭示了一个相关的问题，阻止了实现(在此处更新)。

指令 呈现包含 Angular {{expressions}} 的 HTML访问存储在 $scope 中的数据.由于最初的解决方案是 $watch当服务 它的数据准备好了。如何确保将"new"数据添加到 $scope在 之前指令 渲染？

架构和流程的概述是:

ControllerA -> 获取用户的输入

ControllerA -> 使用 服务 转换数据

ControllerB -> $watch对于 中的更改服务

Directive -> $watch对于 中的更改服务

ControllerB -> 将数据添加到 $scope

Directive -> 显示转换后的数据(来自 服务 )使用
指令

问题出在第 5 步和第 6 步之间。指令 渲染 {{expressions}}在 ControllerB 将数据添加到 $scope 之前.即使这确实有效，但感觉太复杂和“hacky”了。

事实上，为了回归，我使用 $watch在 ControllerB 中监听转换后的数据何时在服务中准备就绪。即使这样也感觉有点矫枉过正( 服务 不进行异步调用)。

Answer 1

您可以在定义指令时注入(inject)服务，然后设置 $watch在数据上。所以在你的情况下:

.directive('tree', function ($compile, myService) {
    return {
        // ...
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return myService.getData();
            },
            function (newVal) {
                if (typeof newVal !== 'undefined') {
                    // ...
                }
            }
        });
    }
});

这将观察数据的变化并在每次数据变化时运行代码。

但是，如果设置一次后数据没有变化 ，更好的方法(更有效)是从服务返回一个 promise ($http 方法直接返回一个 promise ，或者您可以使用 $q 服务创建一个 promise )，然后将您的计算作为数据的延续添加。

.directive('tree', function ($compile, myService) {
    return {
        // ...
        link: function (scope, element, attrs) {
            myService.getData().then(function (data) {
                // ...
            }, function (err) {
                // Handle error
            });
        }
    }
});