javascript - Angular 指令不工作 Chrome 打包应用程序

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

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

最佳答案

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

Uncaught Error: No module: test.

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

list .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});
});

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

关于javascript - Angular 指令不工作 Chrome 打包应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16777892/

相关文章:

javascript - 对嵌套数组进行排序的最佳方法(返回值与排序和 math.max)

javascript - 检查客户端是否可以访问资源的 RESTful 方法是什么?

javascript - Chrome 开发工具 - 导航期间的代码覆盖率

javascript - 更新指令内的 attrs 值 - 如何在 AngularJS 中执行此操作

angularjs - Angular-ui + D3 : how to implement contextual menu (popover vs modal)?

javascript - 从外部应用程序到 Spring Security 的 Ajax 身份验证

javascript - 添加元素以有条件地验证函数

php - 如何为 JavaScript 和 JSON 正确编码 UTF-8?

javascript - Selenium 将浏览器 Chrome 设置为离线模式

angularjs - [FromBody] 中的字节数组和 JSON