NG-包括不與腳本類型的工作= 「文/ NG-模板」

http://plnkr.co/edit/oIei6gAU1Bxpo8VUIswt

當單擊該按鈕，下面應的「Hello World之前插入！「 span：

<script type="text/ng-template" id="tempTest"> 
    <div> 
    <span>Properly Inserted</span> 
    </div> 
</script>

減去腳本標記，當然。

我通過動態插入下面的DIV實現這一點：

<div ng-include="tempTest"></div>

然後編譯它。但是，如果您查看日誌，編譯後剩下的唯一東西是：

這是怎麼回事？爲什麼我的插入沒有正確編譯？邏輯如下：

$scope.insert = function(){ 
    // Create elements // 
    var container = angular.element('<div id="compiled-container"></div>'); 
    var element = angular.element('<div ng-include="tempTest"></div>'); 

    //Insert parent Container 
    $('#greeting').before(container); 

    // insert the element 
    $animate.enter(element, container); 

    // test insertion 
    console.log("Before Compile: " +container.html()) 

    $compile(element); 

    //look again after compile 
    console.log("After Compile: " +container.html()) 

};

來源

2014-01-15 JHixson

的快速答案可能是：

<div ng-include="'tempTest'"></div>
也許你忘記了單引號引用的模板。

的長答案：

，不建議訪問控制器內部的DOM - 你會遇到麻煩的代碼將與$scope.$apply()電話被淹沒。考慮使用指令來實現此功能。我試圖從你的代碼中創建一個起點，在這裏

http://plnkr.co/UWUCqWuB9d1dn6Zwy3J3

var app = angular.module('plunker', ['ngAnimate']); 

app.directive('greeting', function($compile){ 
    return { 
    restrict: 'E', 
    scope: { 
     name: '=' 
    }, 
    template: '<div>'+ 
       ' <span>Hello {{name}}!</span>'+ 
       ' <button ng-click="insert()">test</button>'+ 
       '</div>', 
    link: function(scope, element, attrs) { 
     scope.insert = function() { 
     var container = angular.element('<div ng-include="\'tempTest.html\'"></div>'); 
     element.before($compile(container)(scope)); 
     } 
    } 
    } 
}) 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
});

<greeting name="name"></greeting>

元素的Hello World之前插入模板！ textnode每次按鈕被點擊。

旁註你甚至需要scope{ name: '='}作爲該指令將繼承其周邊範圍，但其更清潔的方式來傳遞（實際上結合）控制器變量的指令明確。

來源

2014-01-15 23:12:27 angabriel

不僅是你糾正對周圍的模板ID的單引號，我也在你的很好的例子看到，我沒有這一行正確的：'$編譯（元）（$範圍）;'。我沒有'（$ scope）'部分。此外，您對該指令絕對正確。實際上，我的實際代碼是在一個指令中。我只是想盡可能快地把我的問題舉到一起。您的指令有一些有趣的元素，但我會盡我所能，所以非常感謝您的幫助！ – JHixson

是否可以引用生活在另一個html文件中的ng-template文本模板？如果角度不在同一個文件中，或者之前已加載，角度如何知道模板？ – Neil

我爲我工作。謝謝 –

<div ng-include src="tempTest"></div>

這應該工作

^^^注意，這將不甚至開始工作，除非加單引號（如@JHixson已經指出的），像這樣：

<div ng-include src="'tempTest'"></div>

來源

2014-11-03 19:38:32 lisapanda

tempTest需要在它周圍有單引號，就像在接受的答案中一樣。 – JHixson

我的downvote立場（在我心中）;原來的迴應是不正確的，誤導人們不知道必要的語法。 – azarc3

它實際上工作*很好*沒有單引號，如果傳入的字符串引用包含正確的URL的字符串 – OneChillDude

只需將您的腳本：

<script type="text/ng-template" id="tempTest"> 
    <div> 
    <span>Properly Inserted</span> 
    </div> 
</script>

必須是內MainCtrl控制器選擇這樣的：

<div ng-app="plunker" ng-controller="MainCtrl"> 
<script type="text/ng-template" id="tempTest"> 
<div> 
<span>Properly Inserted</span> 
</div> 
</script> 
</div>

來源

2017-10-09 14:37:00 ALWAN

NG-包括不與腳本類型的工作= 「文/ NG-模板」

回答

相關問題