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

Question

我已将一个外部本地 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}} - 而不是 'test'。我试过将 'ng-app' 和 'ng-controller' 放在 #container2 中，但它仍然是一样的。

Answer 1

混合 AngularJS 和 jQuery 是自找麻烦！

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

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

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

How to bind angular.js data to imported html?

javascript

jquery

html

angularjs

ng-bind