Question

我希望在angular指令中有一个双向绑定这就是我正在做的事情

angular.module('myapp',[]),directive('mydirective', function() {
    var directive = {};
    directive.restrict = 'E';
    directive.replace = true;
    directive.templateUrl = 'mydirective.html';
    directive.scope = {
      myModel : '=',
    };
    directive.controller = function($scope){

    }

    directive.link = function($scope, $element, attrs) {

    };
  return directive;

我的模板

<div ng-model="name">
</div>
<div ng-model="age">
</div>

使用该指令

我想在指令控制器中使用名称和年龄，但不想将这些模型映射到父模型我想在这些模型上执行一些逻辑，然后我想设置父模型。

Answer 1

您已经使用scope: {myModel:'='}创建了一个新的隔离范围，其中myModel指向父级的myModel。这时，myModel是对范围。$ parent.myModel的引用，所以当你修改scope.myModel时，你也在修改范围。$ parent.myModel，正如你已经注意到的那样。

您现在需要的是新范围内的新模型。

link: function(scope) {
   scope.model = angular.copy(scope.myModel); // copies all values from parent and create a new object model which you then use in your template

   scope.saveModel = function() {
       scope.myModel.age = scope.model.age;
       scope.myModel.name = scope.model.name; //saves values back to parent
   }

}

然后，您的指令模板应使用model作为ng-model，如：

<input ng-model="model.name" />
<input ng-model="model.age" />
<button ng-click="saveModel()">apply</button>

ng-model内角指令

1 个答案: