CODEWITHSUNDEEP
javascriptgoogle-chromeangularjsangularjs-directivegoogle-chrome-app
Tyler Sanderson
Tyler Sanderson

Reputation: 93

Angular Directives Not Working Chrome Packaged App

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.

Upvotes: 1

Views: 1786

Answers (1)

mangini
mangini

Reputation: 4259

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: enter image description here

Upvotes: 2

Related Questions