javascript - angularJS template url is not loading automatically -


  1. it's loading when type char in input type="search".
  2. 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

Popular posts from this blog

How to access named pipes using JavaScript in Firefox add-on? -

multithreading - OPAL (Open Phone Abstraction Library) Transport not terminated when reattaching thread? -

node.js - req param returns an empty array -