javascript - 从 AngularJS 访问全局变量

Question

我想用嵌入在 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 直接呈现到此函数中时，它才有效。

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

score 11 · Accepted Answer

至少有两种方式：

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

显示两种解决方案：

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

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

javascript - 从 AngularJS 访问全局变量

1 回答 1

Related

Reference