javascript - ngModel、点规则和多级范围层次结构

Question

假设我想编写如下 HTML:

<div my-directive my-start="topModel.start" my-end="topModel.end">

my-directive 有一个模板，可以使用 ngModel 调用其他指令，如下所示:

<div>
  <input ng-model="myStart" />
  <input ng-model="myEnd" />
</div>

我希望内部输入能够透明地更新topModel。但这种方式行不通，因为 ng-model 属性中没有点，并且该值是在本地范围内设置的。

到目前为止，我发现的唯一方法是在 my-directive 中观看两个模型并进行翻译，但这是一个可怕的令人厌恶的行为。

restrict: 'A',
scope: {
    myStart: '=',
    myEnd: '='
},
link: function(scope, el, attrs) {
    scope.model = { start: scope.myStart, end: scope.myEnd };
    scope.$watch("model.start", function(n) {
        scope.myStart = n;
    });
    scope.$watch("model.end", function(n) {
        scope.myEnd = n;
    });
    scope.$watch("myStart", function(n) {
        scope.model.start = n;
    });
    scope.$watch("myEnd", function(n) {
        scope.model.end = n;
    });
}

如何将绑定(bind)通过 my-directive 传递到内部指令，而无需所有这些手动同步？

编辑:请参阅 plunker http://plnkr.co/edit/ppzVd7?p=preview - 这个确实有效

EDIT2:查看另一个地址 http://plnkr.co/edit/Nccpqn?p=preview - 这个展示了不带点的“直接访问”如何不起作用，而使用点和 $watches 却可以。

Answer 1

当您按照指令定义 scope 属性时，您将自动获得两个属性:scope.myStart 和 scope.myEnd，与 topModel 双向绑定(bind)。当您将它们映射到 scope.model 时，您就破坏了该绑定(bind)。

这是一个工作示例:

module.directive('myDirective', function () {
    return {
        scope: {
            myStart: '=',
            myEnd: '='
        },
        template: '<p><label>Start: <input type="text" ng-model="myStart" /></label></p>' +
                  '<p><label>End: <input type="text" ng-model="myEnd" /></label></p>',
        link: function (scope, element, attrs) {
            scope.$watch('myStart', function (val, old) {
                console.log('Start changed from', old, 'to', val);
            });

            scope.$watch('myEnd', function (val, old) {
                console.log('End changed from', old, 'to', val);
            });
        }
    };
});

Plunker