- It's loading when I type a char in input
type="search"
. - Page is calling 'ajax call' twice. request is fire twice on 'single click' or 'onPageload'
index.Html
This is my html file which has a search box
<div>
<div class="input-group">
<input type="search" class="form-control search" ng-model="searchtag" tabindex="1">
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="search()"></button>
</div>
<ng-view></ng-view>
</div>
This search box is not attached than why is this so silly thing happening??
template url is loading in this ng-view
index.js file:
Here I have defined a configuration of routing for template url.
angular.module("myApp", ['ngRoute'])
.config(["$routeProvider", function($routeProvider) {
$routeProvider.
when("/", { templateUrl: "pic.html" }).
when("/Search", { templateUrl: "pic.html" }).
when("/VipList", { templateUrl: "cust.html" }).
otherwise({ redirectTo: "/", templateUrl: "pic.html" });
}]
)
Here I have created a service which call send the ajax call to server and returns back a json object. Calling ajax call twice on each request and returning two 'Json' data object.
.factory('Search', [function($http, $scope) {
return {
fetchPopular: function($scope, callback) {
$.ajax({
type: "POST",
url: 'Search',
data: {search : $scope.globeSearch},
dataType: 'json'
}).
success(function(data, status, headers, config) {
console.log(data);
if(data.data.length<=0){
alert("No data found");
}
callback(data.data);
})
.error(function(data, status, headers, config) {
});
}
};
}
])
.controller("fetch", function($scope, $interval, $location, Search) {
$scope.globeSearch="Sachin";
$scope.pics = [];
$scope.have = [];
$scope.orderBy = "-comments.count";
$scope.getMore = function(callback) {
Search.fetchPopular($scope, function(data) {
for(var i=0; i<data.length; i++) {
if (typeof $scope.have[data[i].id]==="undefined") {
$scope.pics.push(data[i]) ;
$scope.have[data[i].id] = "1";
}
}
$location.path("/Search");
});
};
$scope.getMore();
$scope.searchPopular = function(callback) {
if($scope.searchStr!=null && $scope.searchStr!=""){ $scope.globeSearch=$scope.searchStr; }
$scope.pics = [];
$scope.have = [];
$scope.orderBy = "-comments.count";
Search.fetchPopular($scope, function(data) {
for(var i=0; i<data.length; i++) {
if (typeof $scope.have[data[i].id]==="undefined") {
$scope.pics.push(data[i]) ;
$scope.have[data[i].id] = "1";
}
}
$location.path("/Search");
});
};
$location.apply()
implies that you're having to kick off the digest cycle again. It might work, but that means that your Angular application isn't behaving correctly. You may be opening yourself up to a larger bug later on. – Vishal Kotcherlakota Apr 29 at 0:25