chrome扩展中的angularjs模板 [英] angularjs templates in chrome extension

问题描述

在基于内容脚本的chrome扩展中使用angularjs模板时，我遇到了一个奇怪的问题.我陷入无限循环.当我使用内联模板(将模板属性与字符串一起使用)时，它可以正常工作.有人可以暗示我在做什么错吗?

I am running into a strange issue while using angularjs template in a content script based chrome extension. I go in an infinite loop. When I use an inline template (using template attribute with a string), it works fine. Can anybody suggest what I am doing wrong?

manifest.json

manifest.json

{
  "name": "Content Script Cross-Domain XMLHttpRequest Example",
  "version": "2.0.0",
  "manifest_version": 2,
  "description": "Demonstrates making cross domain requests from a content script by putting Twitter trends on Google News.",
  "permissions": [
    "http://localhost:9393/*"
  ],
  "icons": {
    "48" : "sample-48.png",
    "128" : "sample-128.png"
  },
  "content_scripts": [
    {
      "matches": ["http://news.google.com/*","*://mail.google.com/*"], 
      "js" : ["lib/jquery-1.6.4.min.js","lib/angular-1.0.1.min.js", "app.js","contentscript.js"]
    }
  ]
}

app.js

angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
  console.log('inside angular.module');
  $routeProvider.
      when('/', {templateUrl: 'contact.html',   controller: AppController}).
      otherwise({redirectTo: '/'});
}]);


function AppController($scope){
  console.log('inside AppController');
}

内部contentscript.js

inside contentscript.js

$(this).append('<div id="gmeAppContainer">'
                                 + '<div ng-view></div>'
                              + '</div>');
var rootEle = $(this).find('#gmeAppContainer');
angular.bootstrap(rootEle,['myApp']);

当我在app.js中使用内联模板时，它可以正常工作.

When I use inline tempate in app.js,it works fine.

when('/', {template: '<div>This is inline template </div>',   controller: AppController}).

也已发布在angularjs谷歌论坛上 https://groups.google.com/d/topic/angular/A_SVYZWPKe8/discussion

Have also posted on angularjs google group https://groups.google.com/d/topic/angular/A_SVYZWPKe8/discussion

推荐答案

看来我想通了.

首先在manifest.json文件中声明模板文件.

First declare the template file in manifest.json file.

  "web_accessible_resources" :[
      "contact.html"
  ]

然后使用chrome.extension.getURL方法获取模板文件的绝对网址

Then use the chrome.extension.getURL method to get the absolute url to the template file

  when('/', { controller: AppController, templateUrl : chrome.extension.getURL('contact.html')}).

这篇关于chrome扩展中的angularjs模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！