angularjs – 更新服务更改时的Angular JS指令

发布时间：2020-12-17 07:49:30 所属栏目：安全来源：网络整理

导读：我试图跟随 this SO answer explaining how to render a recursive JSON structure using a directive.但是,与提供的答案不同,当DOM被加载并且Angular第一次运行时,我的数据是不知道的. 相反,我的数据从HTML输入字段中检索并存储在Angular服务中(用户提交表

我试图跟随 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.所以在你的情况下：

.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
            });
        }
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!