Accéder à la variable globale depuis AngularJS

Je souhaite initialiser un modèle Angular avec un objet JSON incorporé dans une page HTML. Exemple:Accéder à la variable globale depuis AngularJS

<html> 
    <body> 
    <script type="text/javascript" charset="utf-8"> 
     var tags = [{"name": "some json"}]; 
    </script> 
    <ul> 
     <li ng-repeat="tag in tags">{{tag.name}}</li> 
    </ul> 
    </body> 
</html>

Le champ tags ne peut pas être résolu, car il est recherché dans le $scope. J'ai essayé d'accéder au champ tags dans mon contrôleur comme ceci:

function TagList($scope, $rootScope) { 
    $scope.tags = $rootScope.tags; 
}

Mais cela ne fonctionne pas.

Cela fonctionne uniquement si j'inclue le TagList directement dans la page HTML et rend le json directement dans cette fonction. Comment puis-je accéder au champ tags dans un fichier js distinct dans un contrôleur angulaire?

Source

2013-03-07 deamon

Il y a au moins deux façons:

Déclarez votre tableau tags dans un balises de script autonomes, dans ce cas, votre variable tags sera lié à l'objet de la fenêtre. Injectez $ window dans votre contrôleur pour accéder à vos variables liées à la fenêtre.
Déclarez votre tableau tags à l'intérieur de la directive ng-init.

Afficher les deux solutions:

HTML:

<body> 

    <script type="text/javascript" charset="utf-8"> 
    var tags = [{"name": "some json"}]; 
    </script> 

    <div ng-controller="AppController"> 
    tags: {{tags | json}} 
    <ul> 
     <li ng-repeat="tag in tags">{{tag.name}}</li> 
    </ul> 
    </div> 

    <div> 
    <ul ng-init="tags = [{name: 'some json'}]"> 
     <li ng-repeat="tag in tags">{{tag.name}}</li> 
    </ul> 
    </div> 

</body>

JS:

app.controller('AppController', 
    [ 
    '$scope', 
    '$window', 
    function($scope, $window) { 
     $scope.tags = $window.tags; 
    } 
    ] 
);

Plnkr

Je vous conseille fortement contre la pollution objet fenêtre.

Source

2013-03-07 15:46:51 Stewie

Existe-t-il un autre moyen d'initialiser une variable dans la vue sans avoir à la déclarer dans une balise HTML? Par exemple, si le tableau 'tags' déclaré dans' ng-init' ci-dessus était un très grand tableau et que je veux l'initialiser dans la vue (à partir du code côté serveur pour ex.) Puis-je utiliser quelque chose comme '{{tags = [{...}]}} 'à la place? – GFoley83

@Stewie il y a aussi des problèmes avec la deuxième approche. Si les balises sont générées par une méthode jsonify, et si elles contiennent des guillemets, tout va freiner – Hartimer

Je ne vois pas de meilleur moyen que d'utiliser $ window pour le cas d'utilisation de @ GFoley83; J'ai le même problème, j'envoie une charge JSON initiale avec le balisage que je veux injecter dans le contrôleur, mais c'est étonnamment difficile à faire avec Angular. Je n'aime pas non plus polluer l'objet fenêtre (ou avoir à tirer dedans globals non plus), mais il semble que la meilleure manière. –

Accéder à la variable globale depuis AngularJS

Répondre

Questions connexes