1

これがこのjsfiddleです：http://jsfiddle.net/6XneN/18/

パッケージ化されたアプリの HTML は次のとおりです。

<!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>

また、ここにJavascriptがあります：

angular.module('test', []).directive('hello', function() {
    return {
        restrict : 'E',
        template : '<div>WHY ISNT THIS WORKING</div>',
        replace: true,
    };
});

JSFiddle でコード ラップが「No Wrap - in」に設定されている場合、ディレクティブは正しく機能します。ただし、JSFiddle で onload が選択されている場合は機能しません。これが、Chrome Packaged Apps でそのディレクティブが機能しない理由だと考えています。エラーは発生していません。変更が反映されていません。この問題を解決する方法について何か考えはありますか?

PS: 私のマニフェストと background.js ファイルはどちらもまったく問題ないので、それは問題ではないと確信しています。

4

1 に答える 1

2

JSFiddle で、Angular は「テスト」モジュールを探しますが、Angular lib が DOM を解析した後に実行される onLoad イベント ハンドラー内にモジュール定義があるため、それを見つけることができません。コンソールを確認すると、

キャッチされていないエラー: モジュールがありません: テスト。

Chrome パッケージ アプリで、単純なアプリを作成してスニペットを実行すると、Angular 1.0.7 で期待どおりに動作します。

マニフェスト.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>

そして最後に controller.js: 

var test = angular.module('test',[]);

test.directive('hello', function() {
  return {
    restrict : 'E',
        template : '<div>WHY ISNT THIS WORKING</div>',
        replace: true,
  };
})

結果のアプリは次のとおりです。 ここに画像の説明を入力

于 2013-05-27T19:42:38.230 に答える