如何通過工廠創建/編譯指令？

我正在建立一個莫代爾工廠，並不斷陷入與$compile有關的問題。我正在嘗試使用工廠向頁面動態添加Modal指令。如何通過工廠創建/編譯指令？

指令本身有一些內部邏輯，允許通過API服務發佈來打開它。它本身註冊到發佈/訂閱服務在其postLink像這樣：

postLink: function(scope, element, attrs) { 

    api.subscribe(attrs.id, function(msg) { 
    //magic happens here 
    }); 
}

的工廠創建並追加像這樣的指令：

angular.module('modal') 
    .factory('ModalFactory', ['$compile', '$rootScope', 'Api', function($compile, $rootScope, api) { 
    return function modalFactory(config) { 
     var scope, element, html, id; 

     init(); //run init so it's initialized on creation 

     function activate() { 
     api.publish(id, 'activate'); 
     } 

     function init() { 
     //checks if initialized already 
     //uses assembleDirective to get the html string and scope 

     angular.element(document.body).append($compile(html)(scope)); //this is the important line of code 
     } 


    function assembleDirective() { 
     //an html string is assembled here and stored into html. uses html from config 

     //rootscope is used to create a new scope (unless provided in config) 
    }  

     return { 
     activate: activate, 
     deactivate: deactivate 
     } 
    } 

}]);

這裏的問題，每當我在運行這個邏輯控制器如下：

//imagine we're in a controller 
var myModal = new ModalFactory({ }); //create empty modal 
myModal.activate(); //fails

問題？當我運行myModal.activate()時，出於某種原因，該指令尚未運行任何內部鏈接邏輯。我console.logged了進程和激活方法運行之前指令本身運行鏈接。這只是打擊了我的思想，因爲我認爲我已經編譯它並添加到DOM（當我想編譯時，我正在考慮運行前/後鏈接函數）

當我控制檯登錄$compile(html)(scope)時，它會返回一個包含的jQLite元素，所有內容都會編譯成，這讓我認爲它工作正常。但是，當我從jQLite對象中獲取實際的DOM片段（最後只做[0]）時，我得到了原始HTML字符串的DOM表示，未編譯。

當我在點擊時運行myModal.activate()的控制器上附加了一個單獨的方法時，該指令已經運行了它的鏈接方法，並且模塊被激活。

來源

2015-01-09 antjanus

您的api服務如何工作？你如何調用init？你在消化週期？ – 2015-01-10 00:47:41

API是一個簡單的pub/sub系統。 – antjanus 2015-01-12 12:41:51

對於任何細讀這個問題，我也終於拿出了作爲回答，彼得的第一個建議非常有幫助（編輯後添加元素）。

我最終做的是在編譯之前在範圍上設置一個屬性。該屬性在postlink中的Modal中觸發了init函數，因此$compile的異步性質最終並不重要。

來源

2015-01-12 14:59:20 antjanus

我相信你的問題是在Angulars內部移動DOM螺絲周圍的角元素。做你正在做的事情的安全方法是先追加它，然後編譯。兩者之間的時間間隔將會很小。如果你改變你的代碼，你會遇到問題嗎？

function init() { 
    //checks if initialized already 
    //uses assembleDirective to get the html string and scope 
    var modalElt = angular.element(document.body).append(html); 
    $compile(modalElt)(scope); 
    }

由布賴恩·福特也許審查角模態代碼：

https://github.com/btford/angular-modal/blob/master/modal.js

查找與$行編譯

來源

2015-01-10 00:39:29

所以我嘗試了你的解決方案，導致Chrome瀏覽器崩潰。我認爲你的建議會編譯整個機構，並可能陷入無限循環。我檢出了角度模態代碼，發現不是編譯整個文檔的主體，而是在編譯後添加它後編譯了它，如果這樣做合理的話。這個解決方案仍然不起作用，因爲我認爲$ compile是異步的，這就是我遇到困難的地方。 – antjanus 2015-01-12 12:41:23

對不起，我認爲append函數剛剛返回了模態的HTML - 這就是我的意圖。無論如何，很高興它幫助你。不應該嘗試像那樣可愛 – 2015-01-12 21:52:06

如何通過工廠創建/編譯指令？

回答

相關問題