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 打包应用程序的原因。我没有收到任何错误，只是没有显示更改。关于如何解决这个问题的任何想法？

PS：我的 manifest 和 background.js 文件都很好，所以我确定这不是问题。

4

1 回答 1

2

在您的 JSFiddle 中，Angular 会查找“测试”模块，但找不到它，因为您的模块定义位于 onLoad 事件处理程序中，该处理程序在 angular lib 解析 DOM 后执行。如果你检查你的控制台，你应该会看到一个

未捕获的错误：没有模块：测试。

在 Chrome 打包的应用程序中，我刚刚创建了一个简单的应用程序并运行您的代码段，它可以在 Angular 1.0.7 中按预期工作：

清单.json： 

{
  "manifest_version": 2,
  "name": "Test angular",
  "version": "1",
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  }
}

主.js： 

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html',
    {width: 500, height: 300});
});

索引.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 回答