Angular 指令不起作用 Chrome 打包应用程序答案

【问题标题】：Angular Directives Not Working Chrome Packaged AppAngular 指令不起作用 Chrome 打包应用程序
【发布时间】：2013-05-22 14:07:37
【问题描述】：

这是这个 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 文件都很好，所以我确定这不是问题。

【问题讨论】：

标签： javascript google-chrome angularjs angularjs-directive google-chrome-app

【解决方案1】：

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

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

在一个 Chrome 打包的应用程序中，我刚刚创建了一个简单的应用程序并运行您的 sn-p，它在 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});
});

索引.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,
  };
})

这是生成的应用程序：

【讨论】：

感谢您非常详细的回答！