2016-04-12 29 views
0

değiştirmek içinAçısal Searchbar yönergesi bir Searchbar yönergesi burada tanımlanmış olan dom

... 
<ion-nav-bar class="bar-balanced material-background-nav-bar"> 
    <ion-nav-buttons side="left"> 
     <a class="button button-icon button-clear ion-navicon" menu-toggle="left" ng-click="toggleLeft()"></a> 
    </ion-nav-buttons> 

    <ion-nav-buttons side="right"> 
     <input type="text" search-bar ng-model="query" ng-change="collectQuery()"></input> 
    </ion-nav-buttons> 
</ion-nav-bar> 
... 

Bu collectQuery() cezası çağırır fakat izin vermez Referans query.

#search-controller.js 
appControllers.controller('searchCtrl', function($scope, $stateParams, $http, $q) { 
... 
$scope.collectQuery = function() { 
    cancel(); 
    canceler = $q.defer(); 
    clearTimeout(timeout); 

    console.log($scope.query); 

    timeout = setTimeout(function() { 
     search($scope.query); 
    }, 300); 
}; 

var search = function(query) { 
    $scope.loading = true; 

    pendingRequest = $http({ 
     method: 'GET', 
     timeout: canceler.promise, 
     url: 'https://website.com/api/' + query 
    }).then(function successCallback(response) { 
     $scope.hits = response.data.contacts; 
     window.data = response; 
    }, function errorCallback(response) { 
     console.log(response); 
    }).finally(function(){ 
     $scope.loading = false; 
    }); 

    return pendingRequest; 
}; 
... 

Bu her zaman konsola undefined çıkarır ve undefined ile api sorgular. Ben 'test' talebi dönüşleri ile api sorgulamak zorlamak, ama DOM değişmezse:

<ion-view title="Search"> 
    <ion-content id="mobile-contract-list-content"><!--search results section--> 
     <p>{{query}}</p> 

     <i class="fa fa-spinner fa-spin" ng-show="loading"></i> 

     <md-list class="ng-hide" ng-show="!loading"> 
      <div class="search-item" ng-repeat="hit in hits"> 
       <div class="row detail"> 
        <i class="fa fa-{{ hit.category }}"></i> 

        <h5> 
         <a href="" target="_blank">{{ hit.search_term }}</a> 
        </h5> 
       </div> 
      </div> 
     </md-list> 
    </ion-content><!--end search results section--> 
</ion-view> 

eksik bir şey var mı? Ben tamamen burada güldüm.

cevap

0

En olası neden, arama denetleyicisinde, herhangi bir yerde $ scope.query tanımlamamış olmanızdır, böylece ng-model güncelleştirmeleri, en yakın kullanılabilir üst kapsamda $ scope.query öğesini ayarlar. ng-show'u çıkarmayı deneyin ve sonra deneyin, muhtemelen bir sonraki kullanılabilir kapsam ng-show'un üstünde denetleyicinizdir.

Eğer durum böyleyse, insanlar ng modelinin ilkel bir değere bağlanmasını engellemenin nedeni budur, her zaman bir nesnenin özelliğine bağlı olmalıdır. Bu, controllerAs veya component kullanırsanız, bu özellik her zaman ilgili özelliği koymak için ilişkili bir nesne varsa, önlemek için kolaydır.

Ancak, bu işe yaramazsa, değişiklik işlevi her zaman ng-model ile aynı kapsamda değerlendirildiğinden ng-change="collectQuery()" değerini ng-change="collectQuery(query)" olarak değiştirin. En azından, modelin düzgün güncellenmediği veya bir kapsam sorunu olup olmadığını daraltabileceksiniz.

+0

yanlışlıkla yukarıda benim yönergesi kodunda 'kapsam' seçeneği vardı. Test etmek için direktifin şablonuna '{{hits.length}}' ekledim ve 'test' ile API'yi çağırmak için collectQuery() 'yi zorladığımda iyi görünecek. Bunun bir kapsam sorunu olduğunu mu düşünüyorsun? 'Kapsam' seçeneğini hash değerine eklerseniz, yönerge ng-change 'collectQuery() ' – daraul

+0

'u çağırmayı durdurur. Büyük olasılıkla, bir öğenin kapsamını incelemek ve sonuçların ne olduğunu görmek için' .scope() 'jQlite yöntemini kullanın. Girdi öğesinde/yönergesinde kullandığınızda olsun. Eğer 'scope: {} 'veya' bindings: {} 'kullanıyorsanız, bunun yerine .isolateScope()' ı çağırmanız gerekebilir. – Scott

+0

Bu beni [bu] (http://i.imgur.com/SijVt65.png) nesnesini alır. Bu, '$ parent' özniteliği altındaki 'searchCtrl' öğesinden 'collectQuery()' ve 'test() işlevlerini içerir. – daraul