2013-05-12 8 views
30

Ich bin neu zu eckig und ich frage mich, wie ich eine Variable zwischen den Controllern in eckigen teilen kann. Ich verwende die folgenden Skripte -Eine Variable zwischen den Controllern teilen in angular.js

In main.js:

function MainCntl($scope) { 
    ---code 
} 

function SearchCtrl($scope, $http) { 
    $scope.url = 'http://10.0.0.13:9000/processAdHoc'; 
    $scope.errorM = "No results";  
    $scope.search = function() { 

     $http.post($scope.url, { "data" : $scope.keywords}). 
     success(function(data, status) { 
      $scope.status = status; 
      $scope.data = data; 
      $scope.result = data; 
      alert('yes'); 
     }) 
     . 
     error(function(data, status) { 
      $scope.data = data || "Request failed"; 
      $scope.status = status; 
      alert('no'); 
      $scope.result = "failed"; 
     }); 
    }; 
} 

In Index.HTML

<body ng-controller="MainCntl" > 
---code 
<div ng-controller="SearchCtrl"> 
    <form class="well form-search"> 
    <div class="ui-widget"> 
      <label for="tags"></label> 
      <a ng-click="search()"><input type="image" src="../../images/search1.png" class="searchbox_submit" /></a> 
      <input ng-model="keywords" placeholder="Shadow Search" id="tags" class="input-medium search-query rounded" /> 
    </div> 
    </form> 
</div> 
---code 
<p ng-model="result"> 
    {{result}} 
</p> 
</body> 

Alles funktioniert gut mit der Ajax-I-Daten bin das Senden und Empfangen einer Antwort Meine Frage ist wie folgt:

In der SearchCtrl-Funktion habe ich eine Variable namens $ scope.result, die später in Index.html bezeichnet wird. Wenn ich den HTML-Code, der diese Variable enthält, in den SearchCtrl-Controller einfüge, funktioniert es gut, aber wenn es im MainCtrl-Controller ist, funktioniert es nicht. Wie kann ich diese Variable zwischen den Controllern teilen?

Dank voraus

Antwort

70

einen Dienst verwenden und injizieren sie beide Controller auf und verweisen Sie Ihre Umfang auf die Dienste Variable Vars.

Beispiel:

angular.module("yourAppName", []).factory("myService", function(){ 

    return {sharedObject: {data: null } } 

}); 

function MainCtrl($scope, myService) { 
    $scope.myVar = myService.sharedObject; 
} 

function SearchCtrl($scope, $http, myService) { 
    $scope.myVar = myService.sharedObject; 
} 

in Ihrer Vorlage zu tun:

{{myVar.data}} 

See an example Verwendet Angular v1.1.5

Der Grund, warum Sie es in einem inneren Objekt gesetzt ist, zu bewahren Sie Ihre Verweise, wenn Sie es ohne "sharedObject" beibehalten und dieses Objekt ändern, zeigt Ihre Bindung auf die alte Referenz a nd würde nichts in der Vorlage anzeigen.

+0

Hallo ShaiRez, danke für die schnelle Antwort und das Beispiel, aber leider funktioniert es immer noch nicht ... vielleicht implementiere ich es nicht richtig. Ich habe alles, was Sie im Beispiel angegeben haben, hinzugefügt und auch die Vorlage in {{myVar.data}} geändert. Zwei Fragen tauchen auf, sollte ich nicht auch die Templates-Ansicht ändern und auch myVar den Erfolgs-/Fehlerfunktionen des Ajax Calls hinzufügen? Nochmals vielen Dank, Gidon – Gidon

+1

Nach dem Lesen ein wenig mehr fand ich einen einfacheren Weg, dies mit $ rootScope zu tun ... Danke trotzdem für Ihre Zeit und Kudos auf den eckigen Meetups, ich werde versuchen, den nächsten zu machen :) – Gidon

+0

@ShaiRez ist das bevorzugte Modell für die Authentifizierung? in einem Dienst authentifizieren (wenn nicht bereits angemeldet) und ein Benutzermodell an alle Controller zurückgeben, die es benötigen? – turbo2oh

Verwandte Themen