I been trying to get AngularJS working in my Chrome extension, and I'm using the ng-repeat function to create a wordlist.
Here's the HTML of my Chrome extension:
<!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>
Here's the script browser_action.js, the JavaScript file that deals with the Chrome pop-up:
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");
});
The var wordThere is just an object with a list of key-value pairs that I retrieved from 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"
};
I used JSFiddle to test out the AngularJS part of the code and it seemed to run fine, but when I packaged everything into a Chrome extension the pop-up doesn't display anything.
Inspect popupand check what are the error messages in the console. See also the first google hit: Using AngularJS in a Google Chrome extension