Angularjs外部模板：模板无法加载？

我认为使用Angularjs加载外部模板就像下面这样简单，

但它不会在浏览器上打印任何内容。 我错过了什么？

HTML，

模板，

 
  
 
#{{person.id}} {{person.name}}
 
  Add  

JS / app.js，

 var app = angular.module('MyTutorialApp',[]); 

JS / maincontroller.js，

 app.controller("MainController", function($scope){ $scope.people = [ { id: 0, name: 'Leon', music: [ 'Rock', 'Metal', 'Dubstep', 'Electro' ], live: true }, { id: 1, name: 'Chris', music: [ 'Indie', 'Drumstep', 'Dubstep', 'Electro' ], live: true } ]; $scope.newPerson = null; $scope.addNew = function() { if ($scope.newPerson != null && $scope.newPerson != "") { $scope.people.push({ id: $scope.people.length, name: $scope.newPerson, live: true, music: [ 'Pop', 'RnB', 'Hip Hop' ] }); } } }); 

编辑：

目录，

 index.html js/ ... ... template/ index.php 

编辑2：

index.html的，

模板/ index.php文件，

  
  
 
#{{person.id}} {{person.name}}
 
  Add  

Answer 1

这里现场演示（点击）。

ng-include查找$ scope属性，因此您需要传递一个字符串，如下所示： ng-include="'/template/index.php'" 。

您传递给它的内容基本上使它在您的控制器中找到它： $scope['/template/index.php'] = 'some string';

你也在模板本身引导角度 – 所以如何包含它？ ng-app需要在主页面中，以便ng-include可以工作！

只需将some-element替换some-element html ， body或您希望该应用程序可以使用的任何元素。

Answer 2

您在模板中引导了ng-app，但是必须在主页面中引导它。 所以只需将ng-app指令从模板移动到主页eG

Answer 3

试试这个

并将ng-app添加到页面顶部

你必须将angular应用程序引导到index.html中