【发布时间】：2014-12-26 23:46:24
【问题描述】：
我不确定如何正确命名这个问题，所以就这样吧..
我正在尝试使用 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>"
};
}
]);
测试模板.html：
<input type="text" ng-model="myModel">
这一次，如果我与生成的第一个输入进行交互，则两个输入都会按应有的方式分别更新。这是它变得有趣的时候......当/如果我与第二个输入（由ng-include生成的那个）交互时，我会失去所有绑定。永远......几乎就像它创建了自己的模型版本一样。之后，更改第一个输入对第二个没有影响。
这里发生了什么？是否确实创建了myModel 的新实例？如果是这样，使用 ng-include 方法时如何避免这种情况？
【问题讨论】：
-
ng-include 创建一个子范围。在两者中将其更改为
ng-model="myModel.value"并查看它是否正常工作。jsbin.com/tehiranopi/3/edit -
谢谢，我完全忘记了子范围。
标签： javascript angularjs angularjs-directive angularjs-scope angularjs-ng-include