1

假设我想编写如下 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;
    });
}

我怎样才能通过绑定 my-directive给内部指令？

编辑：见 plunker 在http://plnkr.co/edit/ppzVd7?p=preview - 这个确实有效

EDIT2 ：在http://plnkr.co/edit/Nccpqn?p=preview中查看另一个- 这个显示了没有点的“直接访问”是如何不起作用的，而使用点并且$watches是。

4

2 回答 2

1

当您scope像在指令上那样定义属性时，您将自动获得两个属性，scope.myStart和scope.myEnd，并双向绑定到topModel. 当您将它们映射到scope.model您时，您会打破这种绑定。

这是一个工作示例：

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

于 2013-06-13T08:36:01.203 回答
0

通过您的第二个示例，我终于理解了您的问题，尽管我仍然认为它不是来自破坏dot-rule。您只是在混合作用域/模型绑定（请参阅 参考资料$parent.myStart）。

尝试：

(function (app, ng) {
  'use strict';

  app.controller('MyCtrl', ['$scope', function($scope) {
    $scope.topModel = {
      start: 'Initial Start',
      end: 'Initial end'
    };
  }]);

  app.directive('myDirective', function(){
    return {
      scope: { myStart: '=', myEnd: '=' },
      template: '<div>\
        <p>Start: <span special-editor-a ng-model="$parent.myStart"></span></p>\
        <p>End: <span special-editor-b ng-model="myEnd"></span></p>\
      </div>'
    }
  });

  // with replace
  app.directive('specialEditorA', function(){
    return {
      scope: true,
      require: 'ngModel',
      replace: true,
      template: '<input type="text" />'
    }
  });

  // without replace
  app.directive('specialEditorB', function(){
    return {
      scope: { m: '=ngModel' },
      require: 'ngModel',
      template: '<input type="text" ng-model="m" />'
    }
  });
}(angular.module('app', []), angular));

演示：http ://plnkr.co/edit/SfFBf5NgFhSOQiFf5Emc?p=preview

于 2013-06-13T09:39:37.363 回答