正確加載AngularJS指令中的文本/ ng-template

我有一個指令，我想清除DIV的內容並將其替換爲模板，無論是在當前視圖還是在我的應用程序中的其他位置。正確加載AngularJS指令中的文本/ ng-template

所以說，我有我的模板是這樣的...

<!-- 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]

我想知道是否需要重新編譯或運行摘要，或者如果我只是g對此完全錯誤。我也不喜歡在我的指令代碼中使用document.getElementById，由於某種原因，它感覺不對。任何人都可以給我一個答案，爲什麼我只看到[object HTMLScriptElement]點擊我的指令後羯羊在我的指導使用document.getElementById是可以接受的，或者有更好的命令加載內容...

這裏的提琴整個應用程序...或一個垃圾箱！ https://jsbin.com/yizupa/edit?html,output

來源

2015-07-21 Mike Sav

您是否只希望在點擊時發生替換？通常你會這樣的一個指令：https://jsbin.com/qudategoda/1/edit?html,output – paul

嗨，很多耶，我更關心的是將模板加載到其他任何東西。我原來的指令將覆蓋大部分界面，我不能在我當前的實現中使用模板指令或templateUrl。我只是想將新內容加載到容器中... –

與此同時，我剛剛得出結論，我的設置/實現是錯誤的，我應該考慮另一種方式來實現這樣的功能。

來源

2015-07-22 08:45:39

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

});

來源

2015-12-07 09:22:00

正確加載AngularJS指令中的文本/ ng-template

回答

相關問題