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

Question

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

如何在 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，你需要访问全局变量。

有什么特别的方法可以做到这一点吗？

Answer 1

我创建了一个有效的CodePen示例，演示如何在AngularJS中以正确的方式执行此操作。应该使用 Angular $window 服务来访问任何全局对象，因为直接访问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;
}]);

Answer 2

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

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

然后，您可以像尝试一样访问它。但请注意，当您更改全局变量时，此变量不会更改。如果需要，可以使用全局对象并"复制"它。由于它将通过引用"复制"，因此它将是相同的对象，因此将应用更改（但请记住，在 AngularJS 之外做一些事情需要你做 $scope.$apply 安利）。

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

Answer 3

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

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

在应用程序之外的角度代码中，模块和控制器定义会添加一个全局 javascript 值 - 这个定义必须在定义角度之前出现。

例：

'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();">

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