javascript – scope.$watch在angular指令中不起作用

发布时间:2020-09-16 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了javascript – scope.$watch在angular指令中不起作用编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经制作了一个自定义指令并使用了ng-model,但是当模型更新时,该指令即使我正在观看该事件.这是代码:

angular.module('Directives').directive("customDirective",['$window',function ($window) {

return {
    restrict: "E",require: 'ngModel',scope: {
        ngModel: '=',},link: function (scope,elem,attrs,ngModel) {

        // IF the model changes,re-render
        scope.$watch('ngModel',function (newVal,oldVal) {
            render();
        });

        // We want to re-render in case of resize
        angular.element($window).bind('resize',function () {
            //this does work
            render();
        })

        var render = function () {
            //doing some work here
        };
    }
}}]);

和观点:

<div ng-repeat="product in pageCtrl.productList track by product.id">
<h3>{{ product.name }}</h3>
<custom-directive ng-model="product.recentPriceHistory">
    &nbsp;
</custom-directive>

每当将新值添加到产品recentPriceHistory时,视图都不会更新.

解决方法

默认情况下,将旧值与新值进行比较时,将检查“参考”相等性.但如果你需要检查价值,那么你需要这样做,

scope.$watch('ngModel',oldVal) {
    render();
},true);

但是这里的问题是angular会深入监视ngModel的所有属性以进行更改.如果ngModel变量是一个复杂的对象,它将影响性能.你可以做到这一点来避免这种情况只检查一个属性,

scope.$watch('ngModel.someProperty',true);

总结

以上是编程之家为你收集整理的javascript – scope.$watch在angular指令中不起作用全部内容,希望文章能够帮你解决javascript – scope.$watch在angular指令中不起作用所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!