AngularJS - Bir Hizmetin Model Olarak Kullanılması, ng-yinele güncellenmiyor

Question

Arama giriş kutusundan, filtre damlacıklarının serisinden ve sonuçların görüntülendiği bir UL'den oluşan ajax arama sayfası oluşturuyorum.

Aramanın filtreler bölümü sayfada ayrı bir yerde olacağından, girişleri ve ajax isteklerini bir arama sunucusu tarafına koordine eden bir Hizmet oluşturmanın iyi bir fikir olacağını düşündüm. Bu daha sonra birkaç ayrı kontrolör tarafından çağrılabilir (biri arama kutusu ve sonuç için, diğeri filtreler için).

Mücadele ettiğim en önemli şey, ajax çağrıldığında yenilemenin sonuçlarının alınmasıdır. Ajax'ı doğrudan SearchCtrl Denetleyicisine koyarsam iyi çalışır, ancak ajax'i bir Hizmet'e taştığımda, Hizmet'te bulma yöntemi çağrıldığında sonuçları güncelleştirmeyi durdurur.

Eminim kaçırdığım basit bir şey ama eminim göremiyorum.

Biçimlendirme:

<div ng-app="jobs"> 
    <div data-ng-controller="SearchCtrl"> 
     <div class="search"> 
      <h2>Search</h2> 
      <div class="box"><input type="text" id="search" maxlength="75" data-ng-model="search_term" data-ng-change="doSearch()" placeholder="Type to start your search..." /></div> 
     </div> 
     <div class="search-summary"> 
      <p><span class="field">You searched for:</span> {{ search_term }}</p> 
     </div> 
     <div class="results"> 
      <ul> 
       <li data-ng-repeat="item in searchService.results"> 
        <h3>{{ item.title }}</h3> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

angularjs: Burada

var app = angular.module('jobs', []); 

app.factory('searchService', function($http) { 
    var results = []; 

    function find(term) { 
     $http.get('/json/search').success(function(data) { 
      results = data.results; 
     }); 
    } 

    //public API 
    return { 
      results: results, 
      find: find 
    }; 
}); 

app.controller("SearchCtrl", ['$scope', '$http', 'searchService', function($scope, $http, searchService) { 
    $scope.search_term = ''; 
    $scope.searchService = searchService; 

    $scope.doSearch = function(){ 
     $scope.searchService.find($scope.search_term); 
    }; 

    $scope.searchService.find(); 
}]); 

kaba JSFiddle, ben ajax dışarı yorumladı ettik ve ben sadece bir örnek olarak elle sonuçları değişken güncelliyorum. Kısalık için filtre bırakmalarını dahil etmedim.

http://jsfiddle.net/XTQSu/1/

Ben angularjs çok yeniyim, bu yüzden tamamen yanlış bir şekilde bu konuda gidiyorsam, bu yüzden söyle lütfen :)

Answer 1

HTML'nizde, denetleyicinizin $ kapsamı üzerinde tanımlı bir özelliğe başvurmanız gerekir.,

<li data-ng-repeat="item in searchService.results"> 

senin hizmetinde yeni bir dizi başvurusu atama daha angular.copy() yerine kullanın:

$scope.searchService.results = searchService.results; 

Şimdi bu hat çalışır: Bunu yapmanın bir yolu, denetleyici bir kez $scope.searchService.results searchService.results bağlanma olduğunu results, aksi takdirde kontrolörün $ kapsamı kaybedecek onun veri bağlama:

var new_results = [{ 'title': 'title 3' }, 
        { 'title': 'title 4' }]; 
angular.copy(new_results, results); 

Fiddle. Kemanda, aramayı bulmak için ilk aramayı() buldum, böylece arama kutusuna bir şey yazdığınızda bir güncellemenin gerçekleştiğini görebilirsiniz.

Answer 2

sorun asla güncelliyoruz olmasıdır sonuçlarınız kapsamınız dahilinde. Böylece 'kamu API' in

function find(term) { 
    $http.get('/json/search').success(function(data) { 
      var results = data.results; 

    }); 
    //also notice that you're not using the variable 'term' 
    //to perform a query in your webservice 
    return results; 
} 

Bir modül desen kullanıyorsanız: Bunu yapmanın birçok yaklaşım vardır, ancak mevcut koduna göre, öncelikleTakvimlerim sonuçları döndürmek için fonksiyonunu bulmak değiştirebilir senin fonksiyonu ve sonuçları bir dizi bulmak döndürür searchService, ancak işlevi aslında sonuçlarını döndürmek için sorumlu olduğu bulmak yapmak isterdim. bir yana, ne zaman size kapsamında doSearch()diyoruz

Ayar, sen

$scope.doSearch = function(){ 
    $scope.searchService.results = searchService.find($scope.search_term); 
}; 

Ben ile jsfiddle güncel searchService tarafından döndürülen olanlar için geçerli sonuçlarını güncellemek isterdim fikirlerim işlevsel değil, ancak bu sorunun hatalarını gidermenize yardımcı olmak için bazı komisyonları ve günlükleri ekledim. http://jsfiddle.net/XTQSu/3/