我一直试图让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扩展程序时,弹出窗口不会显示任何内容。