如何将 angular.js 数据绑定到导入的 html？答案

【问题标题】：How to bind angular.js data to imported html?如何将 angular.js 数据绑定到导入的 html？
【发布时间】：2019-03-20 18:30:26
【问题描述】：

我已将一个外部本地 html 文件 (index2.html) 导入到我的 html 文件的 div (index.html, #container) 中。我想使用 Angular 将数据值绑定到导入的 html 文件中的某些标签。到目前为止，这是我的代码 - http://plnkr.co/edit/APXdpQzRUOfGehqSAJ9l?p=preview

index.html

<div id="container" ng-app="myApp" ng-controller="myController"></div>

<script type="text/javascript">
  $(function() {
    $("#container").load("index2.html");
  });

  var app = angular.module('myApp', []);
  app.controller('myController', function($scope) {
    $scope.name = "test";
  });     
</script>

index2.html

<div id="container2">
 <p>test content:</p>
 <p>{{name}}</p>
</div>

但是，它只是显示为文本 {{name}} - 而不是“测试”。我尝试将 'ng-app' 和 'ng-controller' 放在 #container2 中，但还是一样。

【问题讨论】：

像这样混合AngularJS和jQuery是自找麻烦。

标签： javascript jquery html angularjs ng-bind

【解决方案1】：

混合使用 AngularJS 和 jQuery 是自找麻烦！

我找到了答案——我使用 ng-include 来导入 html 而不是加载函数。

<div id="container" ng-include="'index2.html'" ng-app="myApp" ng- 
controller="myController"></div>

【讨论】：