webentwicklung-frage-antwort-db.com.de

Zugriff auf die globale Variable js in der AngularJS-Direktive

Zuerst habe ich nachgesehen und keinen Artikel gefunden, der meine Frage abdeckt.

Wie greife ich auf eine vordefinierte globale Variable in der AngularJS-Direktive zu?

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

Dann schreibe ich eine AngularJS-Direktive:

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

Das funktioniert nicht wirklich.

Dann bin ich informiert, dass ich ng-init

Also habe ich Code woanders geschrieben:

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

Und das funktioniert anscheinend nicht so gut ... das ist wie ein Teufelskreis. Sie müssen auf vordefinierte globale js-Variablen zugreifen und dann ng-init verwenden. Um ng-init verwenden zu können, müssen Sie auf globale Variablen zugreifen.

Irgendeine spezielle Möglichkeit, dies zu tun?

51
windweller

Ich habe ein funktionierendes CodePen-Beispiel erstellt, das zeigt, wie dies in AngularJS richtig gemacht wird. Mit Angular $ window service sollte auf alle globalen Objekte zugegriffen werden, 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;
}]);
95
Adam Thomas

Kopieren Sie die globale Variable in eine Variable im Gültigkeitsbereich Ihres Controllers.

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

Dann können Sie einfach darauf zugreifen, wie Sie es versucht haben. 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 als Referenz "kopiert" wird, handelt es sich um dasselbe Objekt, und daher werden Änderungen angewendet (denken Sie jedoch daran, dass Sie für Arbeiten außerhalb von AngularJS $ scope ausführen müssen. $ Apply anway).

Aber vielleicht lohnt es sich, zu beschreiben, was Sie tatsächlich erreichen wollen. Weil die Verwendung einer solchen globalen Variablen fast nie eine gute Idee ist und es wahrscheinlich einen besseren Weg gibt, um zu Ihrem beabsichtigten Ergebnis zu gelangen.

12
Juliane Holzt

Ich habe diese Methoden ausprobiert und festgestellt, dass sie nicht für meine Bedürfnisse geeignet sind. In meinem Fall musste ich die von json gerenderte Serverseite in die Hauptvorlage der Seite einfügen, sodass die Daten beim Laden und angular inits bereits vorhanden sind und nicht abgerufen werden müssen (großer Datensatz).

Die einfachste Lösung, die ich gefunden habe, besteht darin, Folgendes zu tun:

In Ihrem angular Code außerhalb der App fügen Modul- und Controller-Definitionen einen globalen Javascript-Wert hinzu - diese Definition MUSS vor den angular Angaben stehen.

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

Zum Schluss müssen Sie noch alles einleiten (Reihenfolge ist wichtig):

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

Initialisieren Sie schließlich Ihren Controller und die Init-Funktion.

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

Auf diese Weise haben Sie nun Zugriff auf alle Daten, die Sie in die globale Variable eingefügt haben.

1