服务更改时更新Angular JS指令

Question

我试图按照这个SO答案解释如何使用指令呈现递归JSON结构.然而,与提供的答案,我的数据是不是在DOM加载和运行的角度,第一次知道.

相反,我的数据从HTML输入字段中检索并存储在Angular Service中(当用户提交表单时).

在修改服务数据时,如何使Angular Directive保持最新状态？

---

更新以回应答案

@musically_ut提供了一个很好的答案,但是却揭示了一个相关的问题,阻止了一个实现(在这里更新).

该指令呈现包含Angular的HTML,该Angular {{expressions}}访问存储在其中的数据$scope.因为最初的解决方案是$watch当服务准备好数据时.如何在指令渲染$scope 之前确保添加"新"数据？

架构和流程概述如下:

1. ControllerA - >从用户那里获得输入
2. ControllerA- >使用服务转换数据
3. ControllerB- > $watch更改服务
4. Directive- > $watch更改服务
5. ControllerB - >添加数据 $scope
6. Directive- > 使用指令显示转换后的数据(来自服务)

问题出在步骤5和6之间.指令{{expressions}}在ControllerB添加数据之前呈现$scope.即使这确实有效,但感觉太复杂和"hacky".

实际上,为了回归,我正在使用$watchControllerB来监听转换后的数据何时在服务中准备就绪.即使这感觉有点矫枉过正(该服务不会进行异步调用).

Answer 1

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

.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', function ($compile, myService) {
    return {
        // ...
        link: function (scope, element, attrs) {
            myService.getData().then(function (data) {
                // ...
            }, function (err) {
                // Handle error
            });
        }
    }
});