在AngularJS指令中正确加载text/ng-template

Loading text/ng-template in AngularJS directives correctly

本文关键字：加载 text ng-template AngularJS 指令      更新时间：2023-09-26

我有一个指令，我想清除div的内容，并将其替换为模板，无论是在我当前的视图还是在我的应用程序的其他地方。

假设我的模板是这样的。

<!-- This is an experiment -->
<script type="text/ng-template" id="1.html">
     <div data-ng-repeat="beatle in beatles track by $index">
      Name: {{beatle.name}}, Instrument: {{ beatle.inst}}, Alive: {{ beatle.alive }}
    </div>
</script>

在我的指令中，我有以下内容:

link: function (scope, element) {
                element.bind('click', function () {
                    // clear out old template
                    angular.element(element).empty();
                    angular.element(element).html(document.getElementById('1.html'));
                });
            }

我似乎能够加载模板，但我看到以下而不是我的内容

[object HTMLScriptElement]

我想知道我是否需要再次编译或运行摘要，或者如果我只是在这完全错误。我也不喜欢在我的指令代码中使用document.getElementById，出于某种原因，它感觉不对。谁能给我一个答案，为什么我只看到[object HTMLScriptElement]点击我的指令后，是否使用document.getElementById在我的指令是可以接受的，或者如果有一个更好的命令来加载内容…

这是整个应用程序的小提琴…或者一个垃圾桶!https://jsbin.com/yizupa/edit?html,输出

与此同时，我刚刚得出结论，我的设置/实现是错误的，我应该考虑另一种方式来实现这样的功能。

here, i have create one running demo.. for route using **text/ng-template**..
index.html
-------------
<!DOCTYPE html>
<html lang="en" ng-app="singlePageApp">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<head>
    <meta charset="UTF-8">
    <title>AngularJS Routing Template..</title>
</head>
<body>
<div ng-controller="singlePageAppController">
{{message}}
</div>
    <ul>
        <li><a href="#/home">Home</a></li>
        <li><a href="#/about">About</a></li>
    </ul>
<div ng-view="showOutput"></div>
</body>
    <script type="text/ng-template" id="home.html">
           This is HOME Page..
    </script>
    <script type="text/ng-template" id="about.html">
           This is ABOUT Page..
    </script>

</html>
--------
app.js
--------
var app=angular.module('singlePageApp',['ngRoute']);
app.config(function($routeProvider){
    $routeProvider
        .when('/home',{
            controller:'singlePageAppController',
            templateUrl: 'home.html'
        })
        .when('/about',{
            templateUrl: 'about.html'
        });
});
app.controller('singlePageAppController',function($scope){
    $scope.message="Hello Single Page Application..";
});
相关文章：