javascript - angularJS template url is not loading automatically -
- it's loading when type char in input
type="search"
. - page calling 'ajax call' twice. request fire twice on 'single click' or 'onpageload'
index.html
this html file has 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 not attached why silly thing happening??
template url loading in ng-view
index.js file:
here have defined configuration of routing 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 have created service call send ajax call server , returns json object. calling ajax call twice on each request , returning 2 '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"); }); };
i'm having hard time understanding you're doing here, can see @ least few problems.
i'm not seeing code controller, nor seeing templates. in order routing work, application's route needs change (ideally inside app's controllers). example, if inside controller called $location.path('/search')
, angular load associated template , invoke controller.
if wouldn't mind putting live demo on plunker or jsfiddle, i'm sure more meaningful help.
edit
i see biggest problems off bat. let's again @ routing configuration.
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" }); }] )
you're not specifying controllers within routes. in order search code executed, need invoke search
factory within child controller. also, first route redundant otherwise()
call.
this plunker taken angularjs documentation should out.
Comments
Post a Comment