Блог

Я импортировал внешний локальный HTML-файл (index2.html ) в div моего HTML-файла (index.html, #контейнер). Я хочу использовать 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, но это все то же самое.

Смешивание AngularJS и jQuery напрашивалось на неприятности!

Я нашел свой ответ — я использовал ng-include для импорта html вместо функции загрузки.

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