好的,所以我已经有一段时间了。
在红色框中,我想要一些角度功能(ng-repeats,数据绑定等...)当双击任何网页上的文本时,会出现此红色框。但是,我似乎无法找到如何实际获得角度有线/连接到红色弹出窗口中的文本框示例。
在chrome中的徽章弹出窗口以及选项页面等中使用angular似乎相当微不足道......但我似乎无法在此实例中使用它。
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){
});