从AngularJS访问全局变量

时间:2013-03-07 15:32:37

标签: javascript json angularjs

我想用一个嵌入在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字段?

1 个答案:

答案 0 :(得分:11)

至少有两种方式:

  1. 在独立脚本标记中声明您的tags数组,在这种情况下,您的tags变量将绑定到窗口对象。将$ window注入控制器以访问窗口绑定变量。
  2. tags指令中声明您的ng-init数组。
  3. 显示两种解决方案:

    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

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