带有 AngularJS 的 Chrome 应用程序（沙盒）答案

【问题标题】：Chrome App(sandboxed) with AngularJS带有 AngularJS 的 Chrome 应用程序（沙盒）
【发布时间】：2015-01-25 17:56:36
【问题描述】：

我有一个带有 AngularJS 的 Chrome 应用程序，我在其中对 html 文件进行了沙盒处理以解决 CSP 错误。当我尝试使用 <ng-include src="'new.html'"></ng-include> 在我的主文件中添加另一个 html 文件时，它会生成一个错误：

XMLHttpRequest cannot load chrome-extension://menecddfopgklpoafdcifghpahpahlcb/new.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

如何在我的沙盒 Chrome 应用中添加ng-include？

我的 manifest.json 文件：

{
  "name": "Test",
  "description": "Test App",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": ["storage", "webview", "<all_urls>", { "fileSystem": ["write"] }],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "paxcom-16.png", "128": "paxcom-128.png" },
  "sandbox": {
      "pages": ["index.html", "new.html"]
  }
}

我的 index.html 文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example.csp-production</title>
  <meta http-equiv="Access-Control-Allow-Origin" content="*">

  <script src="angular.min.js"></script>
  <script src="script.js"></script>
  <script src="sql.js"></script>

</head>
<body ng-app="cspExample" ng-csp="">
  <div ng-controller="MainController as ctrl">
  <div>
    <button ng-click="ctrl.inc()" id="inc">Increment</button>
    <span id="counter">
      {{ctrl.counter}}
    </span>
    <ng-include src="'new.html'"></ng-include>
  </div>

</div>
</body>
</html>

【问题讨论】：

标签： angularjs google-chrome-extension google-chrome-app angularjs-ng-include

【解决方案1】：

我为你创建了一个指令:)

myApp.directive('agInclude', function($sce){
    return {
        restrict : 'AE',
        replace : true,
        template : "<div ng-include='parsedUrl'></div>",
        scope : {
            agInclude : "@"
        },
        link : function(scope, element, attrs) {
            scope.parsedUrl = $sce.trustAsResourceUrl(chrome.extension.getURL(scope.$eval(attrs.agInclude)));
        }
    }
});

本质上，我正在创建一个中间步骤，以正确的 chrome 格式解析 url，并在新的 ng-include 中使用它。

用法（就像使用 ng-include 一样）：<div ag-include="'new.html'"></div>

【讨论】：

这是一个非常有用的指令。我要把它保存在我的 chrome 扩展角度模板中！