Question

我不确定如何正确地标题这个问题，所以在这里......

我正在尝试使用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方法时如何避免这种情况？

Answer 1

这并不奇怪，正如PSL所说， ng-include创建新范围。

如果要创建保持这些模型附加的行为，你应该改变

<input type="text" ng-model="myModel">

要：

<input type="text" ng-model="$parent.myModel">

Angular模型使用ng-include in指令丢失范围

1 个答案: