在Chrome擴展內容腳本中應用Angular.js到新的DOM元素

Question

好的，所以我一直在這一段時間。

在紅色框中，我想要有一些角度功能（ng-repeats，數據綁定等...）當雙擊任意網頁上的文本時，將出現此紅色框。然而，我似乎無法找到如何實際上角度有線/連接到紅色彈出框中的文本框示例。

看來相當瑣碎，在鍍鉻徽章彈出使用的角度，以及對選項頁，等等...但我似乎無法得到它在這種情況下工作。

inject.js（其被包括在如清單內容的腳本，下文）

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

和我的的manifest.json內容腳本陣列看起來像：

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

和app.js，也包含在清單中，只是一些骨架應用程序啓動和運行。

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

如果您在頁面加載後注入標記，則需要手動bootstrap。如果加載文檔時，角將僅運行ng-app。之後，您將模塊名稱傳遞給angular.bootstrap：

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

Example。