Comment accéder global variable js dans AngularJS directive

Tout d'abord, j'ai vérifié et je n'ai trouvé aucun article portant à ma question.

Comment accéder à un pré-définis js variable globale dans angularJS intégré dans la directive?

Par exemple, j'définir cette variable dans <script>var variable1 = true; </script>

Puis-je écrire une AngularJS directive:

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

Cela ne fonctionne pas vraiment.

Alors je suis informé que je devrais utiliser ng-init

J'ai donc écrit le code quelque part d'autre comme:

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

Et ce qui, apparemment, ne fonctionne pas aussi bien...c'est comme un cercle vicieux. Vous avez besoin d'accéder à la pré-définis js variables globales, alors vous devez utiliser ng-init; pour l'utiliser ng-init, vous avez besoin d'accéder à des variables globales.

Une manière particulière de faire cela?

InformationsquelleAutor windweller | 2013-10-15
  1. 94

    J'ai créé un travail CodePen exemple montrant comment ce faire de la bonne façon en AngularJS. L'angle de $service de fenêtre doit être utilisé pour accéder à des objets globaux depuis accédant directement window rend les tests plus difficile.

    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;
}]);
    • Cela devrait être la réponse la plus précise! Merci!!!! Triste que je dois passer par un contrôleur de faire ce genre d'affectation de la valeur.
    • Sera-ce de regarder l' $de la fenêtre de variables et mise à jour de la portée de la variable lorsque la fenêtre de modification de la variable?
    • Non, si $window.variable1 changements $scope.variable1 sera hors de date.
    • Ce n'est pas de travail pour moi. Il imprime comme ceci: Value of global variable read by AngularJS: {{variable1}}
    • $scope.variable1 l'habitude de mettre à jour quand variable1 changements...
    • Si vous voulez mettre à jour simplement définir un intervalle: $interval(function(){ $scope.variable1=$de la fenêtre.variable1 }, 100)

    InformationsquelleAutor Adam Thomas
  2. 12

    Copie de la variable globale à une variable dans la portée de votre contrôleur.

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

    Alors vous pouvez simplement y accéder comme vous avez essayé. Mais notez que cette variable ne change pas lorsque vous modifiez la variable globale. Si vous avez besoin, vous pouvez utiliser un objet global et "copie" qui. Comme il va être "copié" par référence, il sera le même objet et donc les modifications seront appliquées (mais n'oubliez pas qu'à faire des trucs à l'extérieur de AngularJS va vous obliger à faire $scope.$appliquer anway).

    Mais il serait peut-être intéressant si vous pouviez décrire ce que vous essayez d'atteindre. Parce que l'utilisation d'une variable globale comme c'est presque jamais une bonne idée et il y a sans doute une meilleure façon d'arriver à votre but.

    InformationsquelleAutor Juliane Holzt
  3. 1

    J'ai essayé ces méthodes et de trouver qu'ils ne fonctionnent pas pour mes besoins. Dans mon cas, j'avais besoin d'injecter json rendu côté serveur dans le template principal de la page, donc quand il charge et angulaire inits, les données sont déjà là et ne pas avoir à être rechargée (grand jeu de données).

    La solution la plus simple que j'ai trouvé est de faire ce qui suit:

    Dans votre angulaire du code en dehors de l'application, un module de contrôleur et de définitions ajouter un javascript global de la valeur à cette définition DOIT venir avant l'ouverture angulaire des choses est défini.

    Exemple:

    'use strict';

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

angular.module('sample', [])

    Puis dans votre contrôleur:

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

$scope.availableList = [];

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

    Enfin, vous avez à init de tout (l'ordre est important):

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

    Enfin initialiser votre contrôleur et de la fonction init.

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

    En faisant cela, vous aurez maintenant accès à toutes les données que vous avez fourré dans la variable globale.

    InformationsquelleAutor MediaGiantDesign