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

前端之家收集整理的这篇文章主要介绍了javascript – 将Angular.js应用于Chrome扩展程序内容脚本中的新DOM元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好的,所以我已经有一段时间了.

在红色框中,我想要一些角度功能(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){

});

解决方法

如果在页面加载后注入标记,则需要手动设置 bootstrap.只有加载文档时,Angular才会运行ng-app.然后,将模块名称传递给angular.bootstrap:
angular.bootstrap(mydiv,['myApp'])

Example.

原文链接:https://www.f2er.com/js/158837.html

猜你在找的JavaScript相关文章