从 AngularJS 访问全局变量答案

【问题标题】：Access global variable from AngularJS从 AngularJS 访问全局变量
【发布时间】：2013-03-07 15:32:36
【问题描述】：

我想用嵌入在 HTML 页面中的 JSON 对象初始化 Angular 模型。示例：

<html>
  <body>
    <script type="text/javascript" charset="utf-8">
      var tags = [{"name": "some json"}];
    </script>
    <ul>
      <li ng-repeat="tag in tags">{{tag.name}}</li>
    </ul>
  </body>
</html>

无法解析tags 字段，因为它是在$scope 中查找的。我尝试像这样访问控制器中的tags 字段：

function TagList($scope, $rootScope) {
  $scope.tags = $rootScope.tags;
}

但它不起作用。

仅当我将TagList 直接包含在 HTML 页面中并将 JSON 直接呈现到此函数中时，它才有效。

如何访问 Angular 控制器中单独 js 文件中的 tags 字段？

【问题讨论】：

标签： javascript json angularjs

【解决方案1】：

至少有两种方式：

在独立脚本标签中声明您的tags 数组，在这种情况下您的tags 变量将绑定到窗口对象。将 $window 注入您的控制器以访问您的窗口绑定变量。
在ng-init 指令中声明您的tags 数组。

显示两种解决方案：

HTML：

<body>

  <script type="text/javascript" charset="utf-8">
    var tags = [{"name": "some json"}];
  </script>

  <div ng-controller="AppController">
    tags: {{tags | json}}
    <ul>
      <li ng-repeat="tag in tags">{{tag.name}}</li>
    </ul>
  </div>  

  <div>
    <ul ng-init="tags = [{name: 'some json'}]">
      <li ng-repeat="tag in tags">{{tag.name}}</li>
    </ul>
  </div>

</body>

JS：

app.controller('AppController',
  [
    '$scope',
    '$window',
    function($scope, $window) {
      $scope.tags = $window.tags;
    }
  ]
);

Plnkr

我强烈建议不要污染窗口对象。

【讨论】：

有没有其他方法可以在视图中初始化变量而不必在 HTML 标记中声明它？例如，如果在上面 ng-init 中声明的 tags 数组是一个非常大的数组，我想在视图中初始化它（例如从服务器端代码）我可以使用类似 {{ tags = [{...}] }} 的东西吗？跨度>
@Stewie 第二种方法也存在问题。如果标签是通过 jsonify 方法生成的，并且如果它们包含引号，那么一切都会刹车
我看不出有什么比在@GFoley83 的用例中使用 $window 更好的方法了；我有同样的问题，我发送了一个带有我想要注入控制器的标记的初始 JSON 有效负载，但这对于 Angular 来说非常困难。我也不喜欢污染窗口对象（或者不得不引入全局变量），但这似乎是最好的方法。
@ElYobo 是的，这非常困难，目前还没有干净的方法来解决它。我想我更喜欢使用 <input type="hidden" data-ng-init="tags = [{name: 'some json'}]" /> 之类的东西，而不必传递全局变量。