нг-модель внутри угловой директивы

Question

Я хочу иметь два способа связывания внутри углового директивы Это то, что я делаю

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 нг-модели, как:

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