Question

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

Answer 1

在你的JSFiddle中，Angular寻找一个'test'模块，但它无法找到它，因为你的模块定义在一个onLoad事件处理程序中，该处理程序在angular lib解析DOM之后执行。如果您检查控制台，您应该看到

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

在Chrome打包的应用中，我刚创建了一个简单的应用并运行您的代码段，它可以按预期使用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>

最后是controller.js：

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

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

以下是最终的应用： enter image description here

Angular Directives不适用于Chrome打包应用程序

1 个答案: