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

【问题标题】：Angularjs external templating: the template cannot be loaded?Angularjs外部模板：无法加载模板？
【发布时间】：2013-12-25 18:59:56
【问题描述】：

我认为使用 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>

模板/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>

【问题讨论】：

标签： javascript jquery angularjs templates

【解决方案1】：

Live demo here (click).

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 替换为html、body 或您希望应用程序使用的任何元素即可。

【讨论】：

@lauthiamkok 我更新的答案解决了您的两个问题。
感谢您的更新。它仍然无法正常工作。请参阅我上面的编辑 2。谢谢！
@lauthiamkok 你仍然没有听我的回答。您正在传递 ng-include $scope 属性而不是字符串。看我的现场演示。它肯定有效，但你必须正确传递它。
@lauthiamkok 我给你做了这个奇怪的例子来说明我的观点plnkr.co/edit/wP324P2qR5VuSHEvjuy8?p=preview
感谢 m59。它适用于您的示例和代码。谢谢。我仍然不明白为什么它不适用于我原来的例子，但没关系......

【解决方案2】：

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

<html ng-app="MyTutorialApp">

【讨论】：

【解决方案3】：

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

试试这个

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

<html ng-app='MyTutorialApp'>

您必须将 Angular 应用程序引导到您的 index.html 中

【讨论】：

你的模板文件夹在根目录吗？
我想是的。请看看我上面的编辑。谢谢。
只需添加