引導酥料餅的指令邏輯不AngularJS定製指令

設置裏面工作： angularjs V1.2.3，用戶界面，引導TPL 0.4.0引導酥料餅的指令邏輯不AngularJS定製指令

問題：指令「酥料餅」從UI定製引導程序指令裏面的「里程碑」。 Milestone指令被渲染，包括彈出標籤，但彈出式邏輯不起作用 - 顯示和隱藏彈出窗口。試圖在交付範圍變量里程碑HTML之前編譯popover HTML，但沒有奏效。有任何想法嗎？

代碼：（非常簡約，以降低複雜性）

//Controller Variable 
$scope.milestonesHTML; 

//Usage in HTML 
<milestone> 
</milestone> 

//Directive definition 
directive('milestone', function($compile) { 
return { 
    restrict: 'E', 

    template: '<span class="test" ng-bind-html="milestonesHTML"></span>', 

    link: function(scope, iElement, iAttrs) { 
     var milesHtml = '<img popover="End-to-end support" width="20" height="20" src="./img/info.png"/>'; 
     var compiledMilesHtml = $compile(milesHtml)(scope); 
     scope.milestonesHTML = compiledMilesHtml[0].outerHTML; 
    } 
};

Plunkr

我已經作出了Plunkr的是，看到here

來源

2013-12-09 ilmgb

在你的鏈接功能，你是編譯並鏈接使用popover指令的img。

var milesHtml = '<img popover="End-to-end support" width="20" height="20" src="./img/info.png"/>'; 
var compiledMilesHtml = $compile(milesHtml)(scope);

這將DOM與事件和範圍掛鉤，併爲您提供最終節點：compiledMilesHtml。然後，您放棄這一切，只是將HTML綁定到你的顯示DOM

template: '<span class="test" ng-bind-html="milestonesHTML"></span>', 

scope.milestonesHTML = compiledMilesHtml[0].outerHTML;

這僅僅是文本，並沒有關於事件是如何迷上了或應該做的範圍或其他工作原理是什麼觀察家知識到你的元素。剩下的就是原始的DOM轉換。

如果您確實需要手動編譯節點，您可以這樣做，並使用jQuery或jQLite將實際元素compiledMilesHtml插入到DOM中。但是，您的模板已經被編譯，鏈接並插入到DOM中。沒有任何其他特殊要求，您的img應該放在您的模板中，它可以正常工作。

template: '<span class="test"><img popover="End-to-end support" width="20" height="20" src="./img/info.png"/></span>'

演示here。我更改了傳遞給彈出窗口的屬性以匹配自定義指令和HTML版本。

來源

2013-12-09 22:22:29 Andyrooger

完美！非常感謝。 – ilmgb

感謝您節省了我一些時間！ – Merlin

引導酥料餅的指令邏輯不AngularJS定製指令

回答

相關問題