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>

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

<强> 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或您希望该应用使用的任何元素。

Answer 2

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

试试这个

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

<html ng-app='MyTutorialApp'>

你必须将有角度的应用程序引导到index.html

Answer 3

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

<html ng-app="MyTutorialApp">

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

3 个答案: