AngularJS无法在Chrome扩展程序中呈现

时间:2015-10-27 17:28:04

标签: javascript angularjs google-chrome-extension firebase

我一直试图让AngularJS在我的Chrome扩展程序中运行,并且我正在使用ng-repeat功能来创建一个单词列表。

以下是我的Chrome扩展程序的HTML:

<!DOCTYPE html>
<body>
    <script src="../firebase.js" ></script>
    <script src="../action.js" ></script>
    <script src="../angular.min.js"></script>
    <script src="browser_action.js" ></script>

    <style type="text/css">
        #mainPopup {
            padding: 10px;
            height: 200px;
            width: 400px;
            font-family: Helvetica, Ubuntu, Arial, sans-serif;
        }
        h1 {
            font-size: 2em;
        }
    </style> 

    <div ng-app='myApp'>
        <div ng-controller="AppController">

          <div ng-repeat="(f1, f2) in steps">
            <p> {{f1}} : {{f2}} </p> 
        </div>
    </div>

</body>

以下是脚本browser_action.js,这是处理Chrome弹出窗口的JavaScript文件:

var wordThere 

fireBank.on("value", function(snapshot){
    console.log(snapshot.val());
    wordThere = snapshot.val();
})

var myApp = angular.module('myApp', []);
myApp.controller('AppController', function ($scope) {
    $scope.steps = wordThere;
    console.log("loaded");
});

var wordThere只是一个对象,其中包含我从firebase检索到的键值对列表:

var wordThere = {
  "alimaniere (ali·manier·e ← manier·o)" : "differently",
  "la" : "the",
  "milito (milit·o ← milit·i)" : "war",
  "mizero (mizer·o)" : "misery",
  "reakciulo (reakci·ul·o ← reakci·o)" : "reactionary",
  "senfina (sen·fin·a ← fin·i)" : "everlasting",
  "tia" : "such, such a, that kind of, that sort of"
};

我使用JSFiddle测试代码的AngularJS部分,它似乎运行良好,但当我将所有内容打包到Chrome扩展程序时,弹出窗口不会显示任何内容。

http://jsfiddle.net/Baleno/7r4e6zvy/

0 个答案:

没有答案