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

时间:2013-10-15 14:24:46

标签: angularjs global-variables

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

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

有什么特别的方法吗?

3 个答案:

答案 0 :(得分:94)

我创建了一个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;
}]);

答案 1 :(得分:12)

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

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

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

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

答案 2 :(得分:1)

我尝试过这些方法并发现它们不能满足我的需求。在我的情况下,我需要将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();">

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