18

私はAngular JSを初めて使用するので、どうすれば外部テンプレートをロードし、それをいくつかのデータでコンパイルしてターゲットdiv.

たとえば、私はこのテンプレートを持っています:

<script type="text/ng-template">

    <img src="{{Thumb}}" />

<script>

divテンプレートが含まれているはずの:

<div data-ng-controller=" ... "></div>

テンプレートはフォルダー内のどこかにあります/templates/test.php。ディレクティブが行うようにテンプレートの読み込みを行い、キーを置き換えるデータに対してコンパイルするビルドイン方法はありますか{{Thumb}}(もちろん他の多くのデータも) ?

編集:$routes Web サイトのルートにいるときにテンプレートを使用してロードするとどうなりますか? どうすればそれを達成できますか？

4

3 に答える 3

18

Angular では、テンプレートを使用する方法が 2 つあります (少なくとも 2 つの方法については知っています)。

  • 次の構文で (同じファイル内の) インライン テンプレートを使用する最初の例:

    <script type="text/ng-template">
    <img ng-src="{{thumb}}">
</script>

  • 2番目のもの（あなたが望むもの）は外部テンプレートです：

    <img ng-src="{{thumb}}">

したがって、テンプレートからスクリプト部分を削除し、必要な div で次のように ng-include を使用する必要があります。

<div ng-include="'templates/test.php'"></div>

機能するには、二重引用符と単一引用符が必要です。お役に立てれば。

于 2013-02-09T13:17:09.227 に答える
2

私がこのindex.htmlを持っているとしましょう：

 <!doctype html> <html lang="en" ng-app="myApp">
        <body>
            <script src="tpl/ng.menu.tpl" type="text/ng-template"></script>   
            <mainmenu></mainmenu>       
            <script src="lib/angular/angular.js"></script>
            <script src="js/directives.js"></script>
        </body> 
</html>

そして、次の4行だけのテンプレートファイル「tpl/ng.menu.tpl」があります。

<ul class="menu"> 
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
</ul>

「js/directives.js」をマッピングする私のディレクティブ：

angular.module('myApp',['myApp.directives']);
var myModule = angular.module('myApp.directives', []);

myModule.directive('mainmenu', function() {
    return { 
        restrict:'E',
        replace:true,
        templateUrl:'tpl/ng.menu.tpl'
    }
});
于 2013-03-18T03:03:43.820 に答える