Modelli esterni Angularjs: il model non può essere caricato?

Ho pensato che caricare un model esterno con Angularjs sia semplice come questo sotto,

<div ng-include='template/index.php'></div> 

Ma non printing nulla nel browser. Cosa mi sono persa?

L'html,

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Angualr</title> <meta charset="utf-8"> <script src="js/angular.min.js"></script> <script src="js/app.js" type="text/javascript"></script> <script src="js/maincontroller.js" type="text/javascript"></script> </head> <body> <div ng-include='template/index.php'></div> </body> </html> 

il model,

 <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'> <input type='text' ng-model='searchText' /> <ul> <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li> </ul> <input type='text' ng-model='newPerson' /> <button ng-click='addNew()'>Add</button> </div> 

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' ] }); } } }); 

EDIT:

directories,

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

EDIT 2:

index.html,

 <div ng-app='MyTutorialApp'> <div ng-include='template/index.php'></div> </div> 

template / index.php,

  <div id='content' ng-controller='MainController'> <input type='text' ng-model='searchText' /> <ul> <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li> </ul> <input type='text' ng-model='newPerson' /> <button ng-click='addNew()'>Add</button> </div> 

Demo demo qui (clicca).

ng-include cerca una properties; $ scope, quindi devi passargli una string, come questo: ng-include="'/template/index.php'" .

 <div ng-include="'/template/index.php'"></div> 

Quello che stavi passando ad esso, lo fa in pratica per cercare questo nel tuo controller: $scope['/template/index.php'] = 'some string';

Stai anche bootstrap angular nel model stesso – quindi come potrebbe essere incluso? ng-app deve trovarsi nella pagina principale in modo che ng-include possa funzionare!

 <some-element ng-app="myApp"> <!-- in here, angular things work (assuming you have created an app called "myApp" --> <div ng-include="'/template/index.php'"></div> </some-element> 

Basta sostituire some-element con qualcosa di simile a html , body o qualsiasi elemento che desideri che l'applicazione funzioni.

Avrai scaricato il tuo ng-app nel model, ma devi lanciarlo nella tua pagina principale. Quindi spostare semplicemente la direttiva sui ng-app dal model alla pagina principale, eG

 <html ng-app="MyTutorialApp"> 
 <div ng-include src='template/index.php'></div> 

prova questo

e aggiungere ng-app nella parte superiore della pagina

 <html ng-app='MyTutorialApp'> 

è necessario eseguire l'avvio di un'applicazione angular nel tuo index.html