javascript - 将 Angular.js 应用于 Chrome 扩展内容脚本中的新 DOM 元素

Question

好的，我已经研究了一段时间了。

在红色框中，我想要一些 Angular 功能(ng-repeats、数据绑定(bind)等...)双击任何网页上的文本时会出现此红色框。但是，我似乎无法找到如何实际连接/连接到红色弹出窗口中的文本框示例的 Angular 。

在 chrome 的徽章弹出窗口以及选项页面等中使用 angular 似乎相当微不足道......但我似乎无法在这种情况下让它工作。

inject.js(作为内容脚本包含在 list 中，如下)

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

和我的 ma​​nifest.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，也包含在 list 中，仅用于启动和运行一些骨架应用。

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如果您在页面加载后注入(inject)标记，请手动进行。 Angular 只有在加载文档时存在 ng-app 时才会运行它。之后，将模块名称传递给 angular.bootstrap:

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

Example .