如何在 AngularJS 指令中访问全局 js 变量答案

【问题标题】：How to access global js variable in AngularJS directive如何在 AngularJS 指令中访问全局 js 变量
【发布时间】：2013-10-15 14:24:45
【问题描述】：

首先，我查了一下，没有找到任何涵盖我的问题的文章。

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

比如我在<script>var variable1 = true; </script>中定义了这个变量

然后我写一个AngularJS指令：

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

这真的行不通。

然后我被告知我应该使用ng-init

所以我在其他地方写了代码，例如：

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

而且这显然也不起作用……这就像一个恶性循环。需要访问预定义的js全局变量，则需要使用ng-init；要使用 ng-init，您需要访问全局变量。

有什么特别的方法吗？

【问题讨论】：

标签： angularjs global-variables

【解决方案1】：

我创建了一个working CodePen example 来演示如何在 AngularJS 中以正确的方式做到这一点。 Angular $window service 应该用于访问任何全局对象，因为直接访问 window 会使测试更加困难。

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;
}]);

【讨论】：

这应该是最准确的答案了！谢谢！很遗憾我必须通过控制器来进行这种价值分配。
这个会观察$window变量并在window变量改变时更新scope变量吗？
@ogc-nick 否，如果$window.variable1 更改$scope.variable1 将过期。
这对我不起作用。打印如下：Value of global variable read by AngularJS: {{variable1}}
如果你想让它更新只需设置一个间隔：$interval(function(){ $scope.variable1=$window.variable1 }, 100)

【解决方案2】：

将全局变量复制到控制器范围内的变量中。

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

然后你可以像你尝试的那样访问它。但请注意，当您更改全局变量时，此变量不会改变。如果需要，您可以改为使用全局对象并“复制”它。由于它将通过引用“复制”，它将是同一个对象，因此将应用更改（但请记住，在 AngularJS 之外执行操作将需要您执行 $scope.$apply anway）。

但是，如果您能描述一下您实际尝试实现的目标，那也许是值得的。因为使用像这样的全局变量几乎不是一个好主意，而且可能有更好的方法来达到您的预期结果。

【讨论】：

对我来说，$scope.$apply 会抛出一个错误，表明它已经在进行中。但是，如果没有 $scope.$apply，它实际上不会响应全局 var 更改，所以我似乎处于一些奇怪的 catch 22 中。非常令人沮丧，因为我试图在 ngReact 中获取一个 React 组件来更改一个 var那个角度可以响应。哦，好吧。
请注意，这个答案已有 8 年历史，整个帖子与 AngularJS（即“版本 1”）相关，而不是 Angular（即版本 2 及更高版本）。

【解决方案3】：

我已经尝试了这些方法，发现它们不能满足我的需求。就我而言，我需要将 json 呈现的服务器端注入页面的主模板，因此当它加载和角度初始化时，数据已经存在并且不必检索（大型数据集）。

我发现的最简单的解决方案是执行以下操作：

在应用之外的 Angular 代码中，模块和控制器定义添加一个全局 javascript 值 - 此定义必须在定义 Angular 内容之前。

例子：

'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>

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

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

通过这样做，您现在可以访问您填充到全局变量中的任何数据。

【讨论】：