Zugriff auf globale js Variable in AngularJS Direktive

Question

Zunächst einmal habe ich überprüft und ich habe keinen Artikel zu meiner Frage gefunden.

Wie eine vordefinierte js globale Variable in AngularJS Einbau-Richtlinie zugreifen?

Zum Beispiel definiere ich diese Variable in <script>var variable1 = true; </script>

Dann schreibe ich eine AngularJS Richtlinie:

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

Dies funktioniert nicht wirklich.

Dann bin ich darüber informiert, dass ich verwenden sollte ng-init

Also schrieb ich Code woanders wie:

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

Und dies anscheinend auch nicht funktioniert ... das ist wie ein Teufelskreis. Sie müssen auf vordefinierte globale js-Variablen zugreifen, dann müssen Sie ng-init; Um ng-init zu verwenden, müssen Sie auf globale Variablen zugreifen.

Irgendein bestimmter Weg, dies zu tun?

Answer 1

Ich habe ein working CodePen example demonstriert, wie dies die richtige Art und Weise in AngularJS zu tun. Der Angular $window service sollte verwendet werden, um auf alle globalen Objekte zuzugreifen, da der direkte Zugriff auf window das Testen erschwert.

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

Kopieren Sie die globale Variable in eine Variable im Bereich in Ihrem Controller.

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

Dann können Sie es einfach zugreifen wie Sie versucht. Beachten Sie jedoch, dass sich diese Variable nicht ändert, wenn Sie die globale Variable ändern. Wenn Sie das brauchen, können Sie stattdessen ein globales Objekt verwenden und dieses "kopieren". Da es durch Referenz "kopiert" wird, ist es das gleiche Objekt und somit werden Änderungen übernommen (aber denken Sie daran, dass das Ausführen von Dingen außerhalb von AngularJS $ scope erfordert. $ Apply anway).

Aber vielleicht würde es sich lohnen, wenn Sie sich beschreiben, was Sie tatsächlich zu erreichen versuchen. Eine globale Variable wie diese zu verwenden, ist fast nie eine gute Idee und es gibt wahrscheinlich einen besseren Weg, um zu Ihrem gewünschten Ergebnis zu kommen.

Answer 3

ich diese Methoden ausprobiert haben und feststellen, dass sie für meine Bedürfnisse nicht arbeiten. In meinem Fall musste ich json gerenderte Server-Seite in die Hauptvorlage der Seite injizieren, so dass die Daten, wenn sie geladen und anguliert werden, bereits vorhanden sind und nicht abgerufen werden müssen (großer Datensatz).

Die einfachste Lösung, die ich gefunden habe, ist folgendes zu tun:

In Ihrem Winkel Code außerhalb der App, Modul und Controller Definitionen hinzuzufügen in einem globalen JavaScript-Wert - diese Definition fallen muss, bevor die Winkel Zeug definiert.

Beispiel:

'use strict'; 

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

angular.module('sample', []) 

Dann in Ihrem Controller:

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

$scope.availableList = []; 

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

Schließlich muss man alles (um Angelegenheiten) init:

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

Schließlich Ihren Controller initialisieren und init Funktion.

Dadurch haben Sie jetzt Zugriff auf alle Daten, die Sie in die globale Variable gefüllt haben.