AngularJS創建動態與指令（$編譯）元素，並使用

Question

我目前具有angularJS問題單獨服務（或我對它的理解 - 我來自一個C＃背景）

我的工作一個需要動態創建元素的項目（從被拖放到頁面上的後果克隆）。一旦這些元素被刪除，我希望他們能夠被雙擊並出現模式。我給他們一個自定義指令（openmodal），然後通過角度編譯服務運行它們。

這一切的偉大工程......

不過，我需要他們能夠訪問服務（我有一個服務作爲代理對象的列表），但正在通過$編譯服務運行後他們無法訪問相同的對象。我正在使用angular.injector方法來獲取當前角度應用程序的編譯服務，所以我不明白爲什麼它不使用同一個服務實例（當上面的元素運行時，會創建一個新的服務實例$編譯）。

我確定它是我理解它/範圍工作的一個問題。然而，我發現這非常難以搜索，因爲在聲明一個指令（包含編譯和鏈接函數）時也使用了「compile」這個詞，並且它們是最顯示的鏈接。

這是一個plunk展示我的問題。如果單擊「添加數字」按鈕幾次（兩個指令將顯示與使用相同服務相同的數字），但是在單擊「創建指令」並單擊「單擊以顯示模態」後，模式會顯示數組長度爲0.

我很確定它與我從javascript創建模式的方式有關。

function CreateModalDirective() { 
     var compileService = angular.injector(['ng', 'numbersApp']).get('$compile'); 
     var scope = angular.element("#divForModal").scope(); 
     console.log(scope); 
     var element = '<div id="theModalContainer" openmodal ng-click="OpenMyModal()">Click to show the modal</div>'; 
     var linkFn = compileService(element); 
     var content = linkFn(scope); 
     angular.element('#' + 'divForModal').append(content); 
    } 

的「FirstController」和「SecondController」只是表明它們正在使用相同的服務，對「ModalController」的randomId參數只是證明了我能夠通過一個數字控制器。

但是，如果不能通過「純JS函數」來做到這一點，那麼我可能不得不考慮重構以實現此功能 - 再次提示指針會很棒！

感謝提前:)

Answer 1

沒錯，在我與這個問題搏鬥的第4天之後，我已經弄清楚發生了什麼。

由於@getOffMyLawn表示模式控制器正在使用全新的$ rootScope。 但是，它並不是來自正在創建新應用程序的angular-ui-bootstrap的$ modal.open函數。 相反，它是我被檢索的方式（或認爲我在檢索）使用angular.injector(['ng', 'appNameHere'])

噴油器讀取the docs（有點更加緊密地）看來我沒有被使用上面的代碼獲取我的應用程序的注入後，而是我正在創建一個全新的應用程序 - 然後創建自己的arrayNumbers服務實例。

所以檢索我的應用程序的噴油器的代碼如下所示： //使用jQuery選擇（僅當jQuery的它已被列入頁）

angular.element('#idOfMyAppElement').injector(); 

那現在檢索注入我的應用程序我可以繼續使用編譯服務，並且它的arrayNumbers服務的實例將被注入到ModalController中 - 因此它們都鏈接起來。

的功能CreateModalDirective（）的工作版本的完整代碼現在是：

function CreateModalDirective(){ 
    var $injector = angular.element('#theApp').injector(); 
    var element = '<div id="theModalContainer" openmodal ng-click="OpenMyModal()">Click here for modal!</div>'; 
    $injector.invoke(function($rootScope, $compile){ 
     angular.element('#' + 'divForModal').append($compile(element)($rootScope)); 
    }); 
} 

Answer 2

從我已經找到了問題是$modal.open功能是創建全新的應用程序，當你有新的應用程序，你也有服務的新實例。這就是我爲什麼這麼想的原因。當我在測試控制器中的rootScope openmodal指令的鏈接功能和CreateModalDirective功能中，它們都打印出相同的rootScope，但是記錄在您傳遞給$modal.open函數的控制器中的rootScope會給出不同的 rootScope，並且由於一個角度應用程序只能有一個rootScope，這意味着我們有兩個不同的應用程序，因此您不能看到服務結果，因爲這些是同一服務的兩個不同實例。這是修改後的plnkr，顯示我說的事情。