Как получить доступ к глобальной переменной js в директиве AngularJS

прежде всего, я проверил, и я не нашел никакой статьи, охватывающей мой вопрос.

как получить доступ к предопределенной глобальной переменной js во встроенной директиве angularJS?

например, я определяю эту переменную в <script>var variable1 = true; </script>

затем я пишу директиву AngularJS:

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

Это действительно не работает.

тогда мне сообщили, что я должен использовать ng-init

поэтому я написал код где-то еще например:

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

и это, по-видимому, тоже не работает...это как порочный круг. Вам нужно открыть предопределенные глобальные переменные в JS, то вы должны использовать НГ-init-инициализация; для того, чтобы использовать НГ-init, который вам нужно получить доступ к глобальным переменным.

любой конкретный способ сделать это?

3 51
angularjs global-variables

3 ответа:

Я создал рабочий пример CodePen демонстрируя, как это сделать правильный путь в AngularJS. Угловой $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;
}]);
91

скопируйте глобальную переменную в переменную в области вашего контроллера.

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

тогда вы можете просто получить к нему доступ, как вы пытались. Но обратите внимание, что эта переменная не изменится при изменении глобальной переменной. Если вам это нужно, вы можете вместо этого использовать глобальный объект и "скопировать" его. Поскольку он будет" скопирован " по ссылке, это будет тот же объект, и поэтому будут применены изменения (но помните, что выполнение вещей за пределами AngularJS потребует от вас выполнения $scope.$применять anway).

но, возможно, было бы полезно, если бы вы описали, чего вы на самом деле пытаетесь достичь. Потому что использование такой глобальной переменной почти никогда не является хорошей идеей, и, вероятно, есть лучший способ получить желаемый результат.

12

Я пробовал эти методы и найти, что они не работают для моих нужд. В моем случае мне нужно было ввести JSON rendered server side в основной шаблон страницы, поэтому, когда он загружается и угловые инициалы, данные уже есть и их не нужно извлекать (большой набор данных).

самое простое решение, которое я нашел, это сделать следующее:

в вашем угловом коде вне приложения определения модулей и контроллеров добавляют глобальное значение 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>

наконец-то инициализировать контроллер и функцию init.

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

сделав это, вы теперь будете иметь доступ к любым данным, которые вы вставили в глобальную переменную.

1