Wenden Sie Angular.js auf das neue DOM-Element in der Chrome-Erweiterung an. Inhaltsskript

Question

Okay, also bin ich schon eine Weile hier.

In der roten Box möchte ich einige eckige Funktionalität haben (ng-Wiederholungen, Datenbindung, etc ...) Dieses rote Feld erscheint, wenn Text auf jede Webseite doppelt geklickt wird. Jedoch kann ich nicht herausfinden, wie man tatsächlich eckig an das Textfeldbeispiel im roten Popup angeschlossen wird.

Es scheint ziemlich trivial zu sein, in einem Badge Popup in Chrom, sowie auf Optionen Seiten usw. eckig zu verwenden ... aber ich kann nicht scheinen, es in diesem Fall zu arbeiten.

inject.js (die als Content-Skript in Manifest enthalten ist, unten)

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); 
    }); 
    } 

und mein manifest.json Content-Skript-Array wie folgt aussieht:

"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" 
     ] 
    } 
    ] 

und app.js, ebenfalls im Manifest enthalten, um nur einige Skelett-Apps zum Laufen zu bringen.

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

Sie müssen bootstrap manuell, wenn Sie die Markierung nach dem Laden der Seite sind zu injizieren. Angular wird nur ng-app ausführen, wenn es beim Laden des Dokuments vorhanden ist. Danach übergeben Sie den Namen des Moduls zu angular.bootstrap:

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

Example.