如何在AngularJS指令中访问全局的jsvariables

首先，我检查了一下，没有发现任何涉及我的问题的文章。

如何在angularJS内置指令中访问预定义的js全局variables？

例如，我在<script>var variable1 = true; </script>定义了这个variables<script>var variable1 = true; </script> <script>var variable1 = true; </script>

然后我写了一个AngularJS指令：

<div ng-if="variable1">Show some hidden stuff!</div>

这不是真的工作。

然后我得知我应该使用ng-init

所以我写了一些其他地方的代码：

<div ng-init = "angularVariable1 = variable1"></div>

而这显然不起作用…这就像一个恶性循环。 你需要访问预定义的js全局variables，那么你需要使用ng-init; 为了使用ng-init，你需要访问全局variables。

任何特定的方式来做到这一点？

Answer 1

我创build了一个可运行的CodePen示例，演示如何在AngularJS中以正确的方式执行此操作。 Angular $ window服务应该用来访问任何全局对象，因为直接访问window会使testing变得更加困难。

HTML：

 <section ng-app="myapp" ng-controller="MainCtrl"> Value of global variable read by AngularJS: {{variable1}} </section> 

JavaScript的：

 // global variable outside angular var variable1 = true; var app = angular.module('myapp', []); app.controller('MainCtrl', ['$scope', '$window', function($scope, $window) { $scope.variable1 = $window.variable1; }]); 

Answer 2

将全局variables复制到控制器中作用域中的variables。

 function MyCtrl($scope) { $scope.variable1 = variable1; } 

那么你可以像试用一样访问它。 但请注意，当您更改全局variables时，此variables不会更改。 如果你需要的话，你可以使用全局对象和“复制”。 由于它将被引用“复制”，它将是相同的对象，因此将会应用更改（但请记住，在AngularJS之外执行操作将需要$ scope。$ apply anway）。

但是，如果你能描述你真正想达到的目标，那么也许是值得的。 因为使用这样的全局variables几乎不是一个好主意，可能有更好的方法来达到预期的结果。

Answer 3

我已经试过这些方法，发现他们不为我的需要工作。 在我的情况下，我需要将json呈现的服务器端注入页面的主模板，所以当它加载和angular度inits时，数据已经存在，不必检索（大型数据集）。

我find的最简单的解决scheme是做到以下几点：

在应用程序之外的angular码中，模块和控制器定义会添加一个全局的javascript值 – 这个定义必须在angular stuff被定义之前。

例：

 'use strict'; //my data variable that I need access to. var data = null; angular.module('sample', []) 

然后在你的控制器中：

 .controller('SampleApp', function ($scope, $location) { $scope.availableList = []; $scope.init = function () { $scope.availableList = data; } 

最后，你必须启动一切（顺序重要）：

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="/path/to/your/angular/js/sample.js"></script> <script type="text/javascript"> data = <?= json_encode($cproducts); ?> </script> 

最后初始化你的控制器和init函数。

  <div ng-app="samplerrelations" ng-controller="SamplerApp" ng-init="init();"> 

通过这样做，您现在可以访问任何填入全局variables的数据。