如何在Windows 8商店应用中使用Angular.js？

Question

我的应用程序可以运行，但是Angular数据对象无法识别。

以下是我遇到的JavaScript错误：

Exception was thrown at line 1059, column 11 in ms-appx://28934b41-4dd2-4414-b9a9-
a73c11c1b743/js/angular.js
0x800a139e - JavaScript runtime error: No module: ngLocale
Exception was thrown at line 4473, column 9 in ms-appx://28934b41-4dd2-4414-b9a9-
a73c11c1b743/js/angular.js
0x800a139e - JavaScript runtime error: HierarchyRequestError
The program '[5112] WWAHost.exe' has exited with code 1 (0x1).

这里是angular.js文件中大约在第1059行的函数：

return ensure(modules, name, function() {
    if (!requires) {
      throw Error('No module: ' + name);
    }

这里是大约在4473行的函数：

 if (parent) {
    parent.replaceChild(newNode, oldNode);
  }

我能够解决我遇到的第一个错误：

Unhandled exception at line 2031
 JavaScript runtime error: Unable to add dynamic content

通过用 MSApp.execUnsafeLocalFunction 包装所有的 angular.js

  MSApp.execUnsafeLocalFunction(function () {
          ....
      });   

这些错误来自我根据Angular.js首页的待办事项列表示例创建的测试应用程序。

现在怎么办？ 根据我参加的免费微软活动，“将任何第三方JavaScript框架/库添加到Windows 8应用程序很容易！” 我可能是新手......但我认为这并不容易！

使用Angular.js开发Windows 8应用程序是否可行？

- Neil Hoff

Answer 1

由于Angular在ng-repeat等指令中使用HTML注释标记<!-- -->，所以Microsoft认为这些标记是不安全的，不能通过JavaScript的.innerHTML方法插入。具体信息请参见此处：

http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx

我在 jQLite 的第 1534 行发现了这个问题：

var div = document.createElement('div');
            // Read about the NoScope elements here:
            // http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx
            div.innerHTML = '<div>&#160;</div>' + element; // IE insanity to make NoScope elements work!
            div.removeChild(div.firstChild); // remove the superfluous div

如果元素是什么，会发生什么？

<!-- ngRepeat: item in arrayTest -->

当Angular执行div.innerHTML = ...时，元素将被删除。如果在div.removeChild处设置断点，您会注意到div.innerHTML没有该元素。

[编辑] 在撰写此响应后，我尝试添加

MSApp.execUnsafeLocalFunction(function () { div.innerHTML = '<div>&#160;</div>' + element });

它可以工作！显然你需要将所有的angularjs都包裹在MSApp.execUnsafeLocalFunction中，然后只针对那一行。

- jonr

---

这个在 Angular 文档中为什么没有提到呢？难道不是每个使用 ng-repeat 的人都会遇到这个问题吗？ - morgs32

这只是针对使用HTML5制作Windows 8应用的人的问题。这不是大多数人使用Angular的原因。 - wmil

顺便说一下，现在你可以使用一个shim（https://github.com/codemonkeychris/angular-winjs）来使Angular与Windows和Windows Phone应用程序兼容。 - Jeremy Foster

Answer 2

我在我的商店应用程序中将ng-csp添加到HTML标签中，使其正常工作。这可以启用内容安全策略，禁用了像'eval'这样的东西。我使用了jQuery（v2.1.1）和Angular（v1.3.0-beta.13）。

有关ng-csp的更多信息，请参阅AngularJS文档。

- Sorskoot

Answer 3

在我的情况下，我使用MSApp.execUnsafeLocalFunction包装了angularjs，并且只使用了data-ng-repeat而不是ng-repeat。

- zied.hosni