7
さて、私はしばらくこの状態にいました。Chrome拡張コンテンツスクリプトの新しいDOM要素にAngular.jsを適用する
赤いボックスでは、角度機能（ngリピート、データバインディングなど）が必要です。この赤いボックスは、テキストのいずれかのウェブページをダブルクリックすると表示されます。しかし、赤いポップアップのテキストボックスの例に実際にどのように角をワイヤ/フックさせるかを見つけることはできません。
chromeのバッジポップアップやオプションページなどで角度を使用するのはかなり簡単ですが、このインスタンスでは動作しないようです。
（以下、マニフェスト内のコンテンツスクリプトとして含まれる）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){
});
良い質問！ :) – sowbug