Question

我正在写一份指令的问题。

在指令模板中还有另一个元素指令。

本质上，外部指令是内部的装饰器，添加了更多功能..

我遇到的问题是$ pristine和$ dirty值没有像我预期的那样设置。

我修改了下面的小提琴来演示类似的场景.. （代码如下：）

HTML

<body ng-app="demo" ng-controller="DemoController">
<h3>rn-stepper demo (3/5)</h3>
Model value : {{ rating }}<br>
<hr>
<div ng-model="rating" rn-stepper></div>
</body>

JS

angular.module('demo', [])

.controller('DemoController', function($scope) {
    $scope.rating = 42;      
})

.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            ngModel: '=ngModel'
        },
        template: '<input type="text" ng-model="ngModel"></input>'
    };
})

.directive('rnStepper', function() {
    return {
        restrict: 'AE',
        scope: {
            value: '=ngModel'
        },
        template: '<button ng-click="decrement()">-</button>' +
                  '<div>{{ value }}</div>' +
                  '<button ng-click="increment()">+</button>' +
                  '<test ng-model="value"></test>',
        link: function(scope, iElement, iAttrs) {
            scope.increment = function() {
                scope.value++;
            }
            scope.decrement = function() {
                scope.value--;
            }
        }
    };
    });

http://jsfiddle.net/qqqspj7o/

模型按预期共享，当我更改文本输入中的值或使用滑块时，绑定有效 - 但是如果我更新文本输入中的值，则只将文本输入标记为ng-dirty - 元素指令本身保持与外部div一样的ng-pristine。

我不明白为什么会这样，并且值不会传播到元素？是预期的行为 - 如果是这样，我如何将ng-dirty等值传播到element指令和外部div ..

注意：我只能使用Angular v 1.2.x，因为代码需要与IE8兼容。

提前致谢..

Answer 1

通常在指令中，您应该避免=value绑定，并直接使用ngModelController。

这个主题在这里讨论有点复杂，但网上有许多很棒的教程我指向你这个： using ngModelController它解释了使用ngModel的基础知识，并讲述了装饰器。

当您直接使用ngModel时，您可以直接在代码中设置有效性和状态（脏/触摸/原始），您也可以通过$setViewValue()设置模型值。

AngularJS嵌套指令$ pristine和$ dirty设置

1 个答案: