嵌入的输入 ng-model 不会更新传递给指令的范围变量

Question

我有一个指令，它本质上是一个复杂的标签标签，它嵌入了一个输入元素，并将输入框的 ng-model 作为参数。

<div switch model="testObject.switch">
    <input type="checkbox" ng-model="$parent.testObject.switch">
</div>

在升级到 angular 1.4 之前，点击指令会更新 ng-model 并触发指令内的监视。

现在，点击指令仍然影响输入框，但指令内的值不受影响。

对于导致此更改的原因以及解决方法的任何见解，我将不胜感激。

fiddle

Answer 1

我已经用工作代码更新了您的 fiddle。如果你在你的指令中需要 ngModel 并观察它的 $modelValue，你就能得到你正在寻找的行为。

HTML:

<div switch ng-model="testObject.switch">

指令：

 booleanSwitchModule.directive('switch', [function () {
  return {
    scope: {},
    require: "?^ngModel",
    link: function (scope, elem, attr, ngModel) {
        var timesChanged = 0;           

        scope.$watch(function() {return ngModel.$modelValue; }, function (val) {

            if (val != undefined) {
                alert("model changed " + ++timesChanged + " times");

                scope.switchPosition = scope.model;
            }
        });


    },
    restrict: 'EA',
    replace: true,
    transclude: true,
    template: '<label class="switch">' +
        'directive scope model: {{ngModel}}' +
        '<span ng-transclude></span>' +
        '</label>',
  }
}]);

这是更新后的 fiddle：https://jsfiddle.net/62911kx5/3/

嵌入的输入 ng-model 不会更新传递给指令的范围变量

Transcluded input ng-model does not update scope variable passed to directive

angularjs

angularjs-directive

angularjs-ng-transclude