Я не был уверен, как правильно назвать этот вопрос, так что вот оно..
Я пытаюсь настроить динамический способ изменения шаблонов внутри директивы, используя метод ng-include. Я создал два примера Plunker, и хотя один должен работать так же, как и другой, похоже, это не так.
HTML для обоих примеров:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<main></main>
</body>
</html>
Пример №1: http://plnkr.co/edit/bi3Plrm8xufuN79Nvajj?p=preview
Я устанавливаю две директивы (одну основную и одну вложенную как дочернюю):
angular.module('myApp', ['Test']);
angular.module('Test', [])
.directive('main', [
function () {
return {
restrict: 'E',
template: '<input type="text" ng-model="myModel"><br><br><child></child>'
};
}
])
.directive('child', [
function () {
return {
restrict: 'E',
template: '<input type="text" ng-model="myModel">'
};
}
]);
Легкий. При запуске приложения оба поля заполняются соответственно по мере изменения модели.
Пример № 2: http://plnkr.co/edit/3ajcTyfJElEzbqvsWwBM?p=preview
HTML остается прежним, но js немного отличается:
angular.module('myApp', ['Test']);
angular.module('Test', [])
.directive('main', [
function () {
return {
restrict: 'E',
template: '<input type="text" ng-model="myModel"><br><br><child></child>'
};
}
])
.directive('child', [
function () {
return {
restrict: 'E',
controller: function($scope) {
$scope.myTemplate = 'test-template.html'
},
template: "<div ng-include='myTemplate'></div>"
};
}
]);
тест-template.html:
<input type="text" ng-model="myModel">
На этот раз, если я взаимодействую с первым сгенерированным вводом, оба ввода обновляются соответственно, как и должны. Вот когда становится интересно... Когда/если я взаимодействую со вторым вводом (тот, который сгенерирован ng-include), я теряю все привязки. Навсегда... Как будто создал свою версию модели. После этого изменение первого входа не влияет на второй.
Что здесь происходит? Действительно ли он создает новый экземпляр myModel? И если да, то как этого можно избежать при использовании этого ng-include метода?
ng-model="myModel.value"в обоих случаях и убедитесь, что он работает.jsbin.com/tehiranopi/3/edit - person PSL schedule 30.10.2014