$ scope。$ watch不触发(控制器为vm)

紫菜

无论我从相同问题的答案中尝试了什么,我都无法使它起作用。注意,我也在使用tr-state checkbox指令

https://plnkr.co/edit/mBy0mm0XZNzo9EnsmL9Q?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var vm = this;
  
   vm.flags = [
        { field: "PaymentMade", title: "Payment Made", isSeaAir: false, filter: null },
        { field: "isInTransit", title: "In Transit", isSeaAir: false, filter: null },
        { field: "Docked", title: "Docked", isSeaAir: false, filter: null },
        { field: "isDockedPartial", title: "Docked Partial", isSeaAir: true, filter: null },

    ];
  $scope.$watch('vm.flags' , function handleFlagssChange(newVla, oldVal) {
        console.log("flags changed");
    });
});

app.directive('indeterminate', [function () {
    return {
        require: '?ngModel',
        link: function (scope, el, attrs, ctrl) {
            var truthy = true;
            var falsy = false;
            var nully = null;
            ctrl.$formatters = [];
            ctrl.$parsers = [];
            ctrl.$render = function () {
                var d = ctrl.$viewValue;
                el.data('checked', d);
                switch (d) {
                    case truthy:
                        el.prop('indeterminate', false);
                        el.prop('checked', true);
                        break;
                    case falsy:
                        el.prop('indeterminate', false);
                        el.prop('checked', false);
                        break;
                    default:
                        el.prop('indeterminate', true);
                }
            };
            el.bind('click', function () {
                var d;
                switch (el.data('checked')) {
                    case falsy:
                        d = truthy;
                        break;
                    case truthy:
                        d = nully;
                        break;
                    default:
                        d = falsy;
                }
                ctrl.$setViewValue(d);
                scope.$apply(ctrl.$render);
            });
        }
    };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl as vm">
  <label>Flags: </label>
        <label class="btn btn-info" ng-repeat="f in vm.flags" style="margin-right:5px;">
            <input type="checkbox" ng-model="f.filter" indeterminate />
            {{f.title}} | {{f.filter}}
        </label>
</body>

尼古拉·安德列夫(Nikola Andreev)

您需要添加第三个参数true,以检查对象相等性是否正确。

$scope.$watch('vm.flags' , function handleFlagssChange(newVla, oldVal) {
    console.log("flags changed");
}, true);

Angular文档

当objectEquality == true时,根据angle.equals函数确定watchExpression的不相等性。为了保存对象的值以供以后比较,使用了angular.copy函数。因此,这意味着观看复杂的对象将对内存和性能产生不利影响。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

scope。$ watch在控制器内不触发

角度UI路由器视图的控制器会导致$ scope。$ watch不触发吗?

父控制器上的$ scope。$ watch不会在子ng-select上触发

Angularjs“控制器为”或“ $ scope”

AngularJS:使用$ scope。$ watch与控制器作为语法

在控制器中使用`this`范围时使用$ scope。$ watch

$ scope。$ watch在jQuery onchange之后不触发?

在SpringMVC控制器层中,@Scope(“ prototype”)与@Scope(“ singleton”)

角度1 $ scope和控制器为,$ scope何时消失?

在指令/控制器中绑定$ scope

没有$ scope的控制器

AngularJS控制器中的'this'与$ scope

从服务刷新特定控制器$ scope

AngularJS:单元测试控制器返回“ TypeError:$ scope。$ watch不是函数”

在没有$ scope或$ watch的情况下跨Angular控制器访问函数

没有$ scope。$ watch的服务和控制器之间的双向绑定。这是不好的做法吗?

Angular自定义指令-$ scope。$ watch不触发

$ scope或$ scope。$ watch中的作用域?

$ scope变量的更改未触发角$ watch

属性更新时不会触发$ scope。$ watch

在AngularJS中的不同控制器中访问$ scope

在控制器函数的回调中修改$ scope

$ scope.data在控制器中未定义

如何与$ scope的控制器共享隔离范围

角度控制器:$ scope或VAR用于非视图变量

将控制器$ scope绑定到服务中的对象

$ scope在控制器中未定义

AngularJS-将$ scope传递给控制器

在angularjs控制器的打字稿代码中处理$ scope