Angular.js'yi, Chrome Extension Content Komut Dosyası'nda yeni DOM Öğesine uygulayın

Question

Tamam, bir süredir bu işte çalışıyorum.

Kırmızı kutuda, bazı açısal işlevselliklere sahip olmak istiyorum (ng-tekrarlar, veri bağlama, vb ...) Bu kırmızı kutu, adresindeki herhangi bir sayfanın çift tıklatıldığında görünür. Ancak, kırmızı açılır pencerede metin kutusuna örnek olarak nasıl kablolu/bağlamalı olarak açılacağını anlayamıyorum.

Krom gibi bir rozette açılır pencerede açısal olarak kullanılması, seçenek sayfalarında vb. Oldukça önemsiz görünüyor ... ancak bu örnekte çalışmayı başaramıyorum.

inject.js (aşağıda tezahür bir İçerik komut olarak dahil edilir,)

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

ve benim manifest.json içerik komut dizisi gibi görünür:

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

ve app.js, aynı zamanda kalkmak ve koşmak için sadece bazı iskelet uygulaması için manifest dahil. Eğer sayfa yüklendikten sonra işaretlemeyi enjekte ediyorlar elle eğer

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

Sen bootstrap gerekir. Angular, belge yüklendiğinde mevcutsa yalnızca ng-app'u çalıştıracaktır. Daha sonra, angular.bootstrap için modül adı geçen:

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

Example.