AngularJS外部模板：無法加載模板？

Question

我以為使用Angularjs加載外部模板就像下面這樣簡單，

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

但是它不會在瀏覽器上打印任何內容。 我錯過了什么？

的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>

模板，

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

編輯：

目錄，

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

編輯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>

Answer 1

現場演示在這里（單擊）。

ng-include尋找$ scope屬性，因此您需要向其傳遞一個字符串，如下所示： ng-include="'/template/index.php'" 。

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

實際上，傳遞給它的東西使它在控制器中尋找它： $scope['/template/index.php'] = 'some string';

您還將在模板本身中引導有角的-那么如何將其包括在內？ ng-app必須位於主頁上，以便ng-include可以正常工作！

<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>

只需將some-element替換some-element html ， body或您希望應用程序運行的任何元素。

Answer 2

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

嘗試這個

並將ng-app添加到頁面頂部

<html ng-app='MyTutorialApp'>

您必須將引導應用程序引導到index.html

Answer 3

您在模板中引導了ng-app，但是您必須在主頁中將其引導。 因此，只需將ng-app指令從模板移至主頁eG

<html ng-app="MyTutorialApp">

AngularJS外部模板：無法加載模板？

問題描述

3 個解決方案

解決方案1
6 已采納 2013-12-25 19:11:32

解決方案2
1 2013-12-25 19:02:14

解決方案3
1 2013-12-25 19:12:54

AngularJS外部模板：無法加載模板？

問題描述

3 個解決方案

解決方案1 6 已采納 2013-12-25 19:11:32

解決方案2 1 2013-12-25 19:02:14

解決方案3 1 2013-12-25 19:12:54

解決方案1
6 已采納 2013-12-25 19:11:32

解決方案2
1 2013-12-25 19:02:14

解決方案3
1 2013-12-25 19:12:54