Question

我只是想在现有指令中添加功能，以便跟踪发生的任何变化。我有一个切换控件，它只用于切换一个布尔值。这是我的指示

app.directive('skToggle', function ($timeout) {
    return {
        replace: true,
        restrict: 'A',
        require: 'ngModel',
        scope: {
            ngModel: '=',
            skcallback: '&callback',
            disabled: '=',
            emit: '@',
            positive: '@',
            negative: '@',
            skTouched:'=?' //THIS IS NEW
        },
        template: '<div class="toggle" ng-class="{ disabled: disabled }" ng-click="disabled || toggle($event)">\
                    <div class="off">\
                        <span>{{neg}}</span>\
                        </div>\
                    <div class="on" ng-class="{ active: ngModel }">\
                        <span>{{pos}}</span>\
                        <div class="control"></div>\
                    </div>\
                  </div>',
        link: function (scope, elem, attrs, ctrl) {
            var hasCallback = angular.isDefined(attrs.callback);
            scope.pos = scope.positive || "YES"
            scope.neg = scope.negative || "NO";

            scope.toggle = function (e) {

                if (hasCallback) {
                    scope.skcallback({ event: e });
                } else {
                    ctrl.$setViewValue(!ctrl.$viewValue);
                }

                if (scope.emit === 'true') {
                    $timeout(function () {
                        scope.$emit('toggle');
                    });
                }


            }

            // THIS IS ALSO NEW
            scope.$watch('ngModel', function(newVal, oldVal){
                if(scope.skTouched && oldVal !== undefined && newVal !== oldVal){
                    scope.skTouched.UI.$dirty = true;
                }
            });

        }
    }
});

我已经评论了该指令的哪些部分是新的...我所做的只是在我的指令上添加一个双向绑定，它接受一个对象并更新它上面的UI.$dirty属性。问题是当我在屏幕上打印出对象时，UI对象永远不会在父$scope上更新。我不知道我是否只是简单地处理某些事情或者我做错了什么，但是我的指令（子）范围并没有像应该那样更新父范围。

<div sk-toggle ng-model="feature.enabled" sk-touched="feature"></div>

Answer 1

所以我意识到问题在于使用$dirty作为我的变量。 Angular必须保留$dirty仅用于表单控制器，这解释了为什么当我在页面上打印整个对象时它没有显示出来。只需将变量更改为dirty即可使其按预期工作

Answer 2

ngModel是一个核心角度指令。可能与您使用ngModel作为使用双向数据绑定的属性存在冲突。

您可以通过将指令的优先级设置为高于ngModel的优先级来解决此问题。添加优先级＆gt;在指令定义中为1。请参阅docs for more info on priority。

双向绑定指令中的父$ scope未正确更新

2 个答案: