Как получить доступ к глобальной переменной 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, тогда вам нужно использовать ng-init; чтобы использовать ng-init, вам нужно получить доступ к глобальным переменным.

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

Ответ 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;
}]);

Ответ 2

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

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

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

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

Ответ 3

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

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

В вашем angular коде вне приложения, определения модулей и контроллеров добавляют глобальное значение javascript - это определение ДОЛЖНО прибыть до того, как будет определен материал angular.

Пример:

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

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