Angular Directives Not Working Chrome Packaged App
Question
Here is this jsfiddle: http://jsfiddle.net/6XneN/18/
Here is my HTML for my packaged app:
<!DOCTYPE html>
<html ng-app ng-csp>
<head>
</head>
<title>Chrome Learning App</title>
<body>
<div ng-app='test'>
<hello>Test</hello>
</div>
<script src="angular.min.js"></script>
<script src="files.js"></script>
</body>
</html>
Also, here is the Javascript:
angular.module('test', []).directive('hello', function() {
return {
restrict : 'E',
template : '<div>WHY ISNT THIS WORKING</div>',
replace: true,
};
});
The directive works properly when the code wrap is set to "No Wrap - in " on JSFiddle. However, it doesn't work when onload is selected on JSFiddle. I'm thinking this is the reason why that directive is not working for me for Chrome Packaged Apps. I'm not getting any errors, the change just isn't showing up. Any thoughts on how to fix this problem?
PS: My manifest and background.js files are both perfectly fine, so I'm sure that's not the issue.
1 answers
solution1
2 ACCPTED 2013-05-27 19:42:38
In your JSFiddle, Angular looks for a 'test' module but it can't find it because your module definition is inside an onLoad event handler that is executed after angular lib parses the DOM. If you check your console you should see a
Uncaught Error: No module: test.
In a Chrome packaged app, I just created a simple app and run your snippet and it works as expected with Angular 1.0.7:
manifest.json:
{
"manifest_version": 2,
"name": "Test angular",
"version": "1",
"app": {
"background": {
"scripts": ["main.js"]
}
}
}
main.js:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html',
{width: 500, height: 300});
});
index.html:
<!doctype html>
<html>
<head>
<script src="angular.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-app="test">
<hello>Test</hello>
</div>
</body>
</html>
and finally the controller.js:
var test = angular.module('test',[]);
test.directive('hello', function() {
return {
restrict : 'E',
template : '<div>WHY ISNT THIS WORKING</div>',
replace: true,
};
})
And here is the resulting app:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.