Zastosuj Angular.js do nowego elementu DOM w Chrome Rozszerzenie Skrypt zawartości

Question

OK, więc jestem w tym od jakiegoś czasu.

W czerwonym polu chcę mieć pewne funkcje kątowe (powtórzenia ng, powiązanie danych itp.). To czerwone pole pojawia się, gdy tekst na stronie jest dwukrotnym kliknięciem dowolnej strony internetowej. Jednak nie mogę się wydawać, aby dowiedzieć się, jak faktycznie uzyskać kątowe podłączone/podłączone do przykładowego pola tekstowego w czerwonym wyskakującym okienku.

Wydaje się dość banalne użycie kątowego w wyskakującym okienku w chrome, a także na stronach opcji, itp. ... ale nie mogę sprawić, żeby działało w tym przypadku.

inject.js (który jest dołączony jako skrypt zawartości w manifeście, poniżej)

var displayPopup = function(event) { 

    var mydiv = document.createElement('div'); 
    var $div = $('#divid').closest('.sentence'); 
    mydiv.innerHTML = getSelectionText(); 
    mydiv.innerHTML += currentSentence.innerHTML; 

     //Next line is where I want to apply some angular functionality 
     mydiv.innerHTML += '<div ng-app="myApp" scroll-to-me><input type="text" ng-model="data.test"><div ng-model="data.test">{{data.test}}</div></div>'; 



    mydiv.id = "popup"; 
    mydiv.style.position = "fixed"; 
    mydiv.style.top = event.clientY + "px"; 
    mydiv.style.left = event.clientX + "px"; 
    mydiv.style.border = "4px solid #d00"; 
    mydiv.style.background = "#fcc"; 

     $("body").append(mydiv); 

    $.getJSON('http://local.wordly.com:3000/words/definitions/test', function(data) { 
     console.log(data); 
    }); 
    } 

i mój manifest.json zawartość tablicy skrypt wygląda następująco:

"content_scripts": [ 
    { 
     "matches": [ 
     "https://www.google.com/*" 
     ], 
     "css": [ 
     "src/inject/inject.css" 
     ] 
    }, 
    { 
     "matches": [ 
     "http://*/*", 
     "https://*/*" 
     ], 
     "js": [ 
     "js/angular/angular.js", "app.js", "js/jquery/jquery.js", "src/inject/inject.js" 
     ] 
    } 
    ] 

i app.js, również zawarte w manifeście, tylko dla niektórych aplikacji szkieletowych, aby zacząć działać.

var myApp = angular.module("myApp", []); 

myApp.factory('Data', function(){ 
    //return {message: "I'm data from a service"}; 
}); 

myApp.controller("SecondCtrl", function($scope, $http){ 

}); 

Answer 1

Trzeba bootstrap ręcznie jeśli wstrzykiwanie znaczników po załadowaniu strony. Angular będzie działał tylko ng-app, jeśli jest obecny podczas ładowania dokumentu. Następnie przechodzą nazwę modułu do angular.bootstrap:

angular.bootstrap(mydiv, ['myApp']) 

Example.