2013-03-07 25 views
8

Ich möchte ein Angular-Modell mit einem JSON-Objekt initialisieren, das in eine HTML-Seite eingebettet ist. Beispiel:Zugriff auf globale Variable von 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> 

Das tags Feld nicht aufgelöst werden kann, weil es in den $scope nachgeschlagen wird. Ich versuchte, das tags Feld in meinem Controller wie folgt zugreifen:

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

Aber es funktioniert nicht.

Es funktioniert nur, wenn ich die TagList direkt in die HTML-Seite einbinden und den json direkt in diese Funktion rendern.

Wie kann ich auf das Feld tags in einer separaten js-Datei in einem Angular-Controller zugreifen?

Antwort

11

Es gibt mindestens zwei Möglichkeiten:

  1. Erklären Sie Ihre tags Array in einem eigenständigen Skript-Tags, wobei in diesem Fall Ihre tags Variable zu Fenster-Objekt gebunden werden. Injection $ window in Ihren Controller, um auf Ihre fenstergebundenen Variablen zuzugreifen.
  2. Deklarieren Sie Ihr tags Array innerhalb der ng-init Direktive.

Es werden beide Lösungen:

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

ich gegen verschmutzende Fensterobjekt stark beraten.

+1

Gibt es eine andere Möglichkeit, eine Variable in der Ansicht zu initialisieren, ohne sie in einem HTML-Tag deklarieren zu müssen? Wenn zum Beispiel das 'tags' Array, das oben in 'ng-init' deklariert wurde, ein wirklich großes Array war und ich es in der Ansicht initialisieren möchte (vom serverseitigen Code für Beispiel), kann ich etwas wie '{{tags = [{...}]}} stattdessen? – GFoley83

+0

@Stewie gibt es auch Probleme mit dem zweiten Ansatz. Wenn die Tags durch eine jsonify-Methode generiert werden und wenn sie Anführungszeichen enthalten, wird alles bremsen – Hartimer

+0

Ich kann keinen besseren Weg als die Verwendung von $ window for @ GFoley83s Anwendungsfall sehen; Ich habe das gleiche Problem, ich sende eine anfängliche JSON-Nutzlast mit dem Markup, das ich in den Controller injizieren möchte, aber das ist überraschend schwierig mit Angular zu tun. Ich mag es auch nicht, das Fensterobjekt zu verschmutzen (oder Globals einzuziehen), aber es scheint der beste Weg zu sein. –

Verwandte Themen