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.
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
'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
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