如何在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。

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

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

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

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

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

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

我已经试过这些方法,发现他们不为我的需要工作。 在我的情况下,我需要将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的数据。