Question

我有一个指令，我希望清除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,output

Answer 1

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

Answer 2

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..";

});

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

2 个答案: