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

Question

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

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

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

Answer 1

Я создал working CodePen example, демонстрируя, как это сделать правильно в 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; 
}]); 

Answer 2

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

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

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

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

Answer 3

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

Самое простое решение, что я нашел, чтобы сделать следующее:

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

Пример:

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

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