2013-05-12 12 views
30

Jestem nowy w kanciastości i zastanawiam się, jak mogę podzielić zmienną między kontrolerami w kanciastych. Używam następujące skrypty -Udostępnianie zmiennej między kontrolerami w angular.js

W 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"; 
     }); 
    }; 
} 

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

Wszystko działa dobrze z AJAX Mam wysyłającej dane i odbieranie odpowiedzi , moje pytanie jest następujące:

W funkcji SearchCtrl mam zmienną o nazwie $ scope.result, która jest później mowa w Index.html. Jeśli wstawię kod html, który zawiera tę zmienną do kontrolera SearchCtrl, działa dobrze, ale jeśli jest w sterowniku MainCtrl, to nie działa. Jak mogę udostępnić tę zmienną między kontrolerami.

Dzięki naprzód

Odpowiedz

70

Użyj usługi i wstrzyknąć go do obu kontrolerów oraz zapoznać Twój zakres vars do zmiennej usług.

Przykład:

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

W szablonie zrobić:

{{myVar.data}} 

See an example Używa kątowa v1.1.5

Powodem go umieścić w wewnętrznej obiektu jest, aby zachować odniesienia, jeśli zachowasz go bez "sharedObject" i zmienisz ten obiekt, twoje powiązanie wskaże na stare odniesienie nd nie pokazuje niczego w szablonie.

+0

Cześć ShaiRez, dziękuję za szybką odpowiedź i przykład, ale niestety nadal nie działa ... może nie wprowadzam go poprawnie. Dodałem wszystko, co podano w przykładzie, a także zmieniłem szablon na {{myVar.data}}. Powstają dwa pytania, czy nie powinienem zmienić także widoku szablonów, a także dodać myVar do funkcji sukcesu/błędu wywołania ajax? Jeszcze raz dziękuję, Gidon – Gidon

+1

Po przeczytaniu nieco więcej znalazłem łatwiejszy sposób na zrobienie tego za pomocą $ rootScope ... Mimo to dzięki za poświęcony czas i nagrody na kanciastych spotkaniach, postaram się zrobić następny :) – Gidon

+0

@ShaiRez jest preferowanym modelem do obsługi uwierzytelniania? uwierzytelnić się w usłudze (jeśli już się nie zalogowano) i zwrócić model użytkownika do wszystkich kontrolerów, które tego potrzebują? – turbo2oh

Powiązane problemy