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

First of all, I checked and I didn't find any article covering my question.

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

How to access a pre-defined js global variable in angularJS built-in directive?

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

For example, I define this variable in <script>var variable1 = true; </script>

例如，我在

Then I write a AngularJS directive:

然后我写了一个AngularJS指令:

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

显示了一些隐藏的东西

This does not really work.

这并不管用。

Then I'm informed that I should use ng-init

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

So I wrote code somewhere else like:

所以我在其他地方写了代码:

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

And this apparently does not work as well...this is like a vicious cycle. You need to access pre-defined js global variables, then you need to use ng-init; in order to use ng-init, you need to access global variables.

而这显然并不奏效……这就像一个恶性循环。您需要访问预定义的js全局变量，然后需要使用ng-init;为了使用ng-init，您需要访问全局变量。

Any particular way to do this?

有什么特别的方法吗?

3 个解决方案

#1

I created a working CodePen example demonstrating how to do this the correct way in AngularJS. The Angular $window service should be used to access any global objects since directly accessing window makes testing more difficult.

我创建了一个可用的代码页示例，演示如何在AngularJS中使用正确的方式实现这一点。由于直接访问窗口使测试更加困难，所以应该使用角$窗口服务来访问任何全局对象。

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

#2

Copy the global variable to a variable in the scope in your controller.

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

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

Then you can just access it like you tried. But note that this variable will not change when you change the global variable. If you need that, you could instead use a global object and "copy" that. As it will be "copied" by reference, it will be the same object and thus changes will be applied (but remember that doing stuff outside of AngularJS will require you to do $scope.$apply anway).

然后你就可以像你试过的那样访问它。但是请注意，当您改变全局变量时，这个变量不会改变。如果需要，您可以使用全局对象并“复制”它。由于它将被引用“复制”，所以它将是相同的对象，因此将应用更改(但是请记住，在AngularJS之外执行操作将需要执行$scope。应用多美元)。

But maybe it would be worthwhile if you would describe what you actually try to achieve. Because using a global variable like this is almost never a good idea and there is probably a better way to get to your intended result.

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

#3

I have tried these methods and find that they dont work for my needs. In my case, I needed to inject json rendered server side into the main template of the page, so when it loads and angular inits, the data is already there and doesnt have to be retrieved (large dataset).

我试过这些方法，发现它们不适合我的需要。在我的例子中，我需要将json渲染的服务器端注入到页面的主模板中，因此当它加载并倾斜时，数据已经在那里，不需要检索(大型数据集)。

The easiest solution that I have found is to do the following:

我找到的最简单的解决办法是:

In your angular code outside of the app, module and controller definitions add in a global javascript value - this definition MUST come before the angular stuff is defined.

在应用程序之外的角代码中，模块和控制器定义添加一个全局javascript值——这个定义必须在角的内容被定义之前完成。

Example:

例子:

'use strict';

//my data variable that I need access to.
var data = null;

angular.module('sample', [])

Then in your controller:

然后在你的控制器:

.controller('SampleApp', function ($scope, $location) {

$scope.availableList = [];

$scope.init = function () {
    $scope.availableList = data;
}

Finally, you have to init everything (order matters):

最后，你必须初始化所有的东西(顺序很重要):

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

Finally initialize your controller and init function.

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

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

By doing this you will now have access to whatever data you stuffed into the global variable.

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

#1