Angularjs外部テンプレート：テンプレートを読み込めませんか？

debugcn 投稿 Dev

田畑

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>

m59

こちらのライブデモ（クリック）。

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またはアプリを動作させたい要素に置き換えるだけです。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]