При загрузке данных с использованием предельного смещения функции контроллера, которые будут сбой, и данные застряли в AngularJS

Question

Я создал приложение для видео-галерей, такое как Youtube, используя AngularJS. Есть REST API, и я вызываю URL REST через услуги Angular. Вот два файла контроллера, и они имеют, скорее всего, такую ​​же функциональность, но вызывают разные URL-адреса для получения разных видео.

Это файл BoxsetCtrl.js, и он получает все видеоролики Boxset (название категории). Это полный файл контроллера.

angular.module ('data_visualize') .controller ('BoxsetCtrl', функция ($ Объем, boxsetService) {

$('html,body').scrollTop(0); 

    $scope.allBoxsets = []; 
    $scope.count2 = parseInt(0); 
    $scope.scene = { 
     sort2: "most_recent" 
    }; 

    /** 
    * Loading all the box sets with limit and offset. 
    */ 
    boxsetService.viewAllBoxSetsByDate(0).then(function (data) { 
     $scope.allBoxsets = data; 
    }); 

    $scope.getSceneSortByValue = function() { 
     $scope.count2 = parseInt(0); 
     $scope.sort2Value = $scope.scene.sort2; 
     console.log($scope.scene.sort2); 

     if ($scope.sort2Value == 'most_recent') { 
      boxsetService.viewAllBoxSetsByDate(0).then(function (data) { 
       $scope.allBoxsets = data; 
      }); 
     } else if ($scope.sort2Value == 'popularity') { 
      boxsetService.viewAllBoxSetsByPopularity(0).then(function (data) { 
       $scope.allBoxsets = data; 
      }); 
     } else if ($scope.sort2Value == 'name') { 
      boxsetService.viewAllBoxSetsByName(0).then(function (data) { 
       $scope.allBoxsets = data; 
      }); 
     } else if ($scope.sort2Value == 'number_of_scenes') { 
      boxsetService.viewAllBoxSetsByScenes(0).then(function (data) { 
       $scope.allBoxsets = data; 
      }); 
     } else { 
      boxsetService.viewAllBoxSetsByDate(0).then(function (data) { 
       $scope.allBoxsets = data; 
      }); 
     } 
    }; 

    $scope.getSelectedLetter = function (letter) { 
     $scope.count2 = parseInt(0); 
     $scope.scene.sort2 = "by_letter"; 
     $scope.selectedLetter = letter; 
     console.log($scope.selectedLetter); 
     boxsetService.viewAllBoxSetsByLetter(letter, 0).then(function (data) { 
      $scope.allBoxsets = data; 
     }); 
    }; 

    $scope.resetLetterFilter = function() { 
     $scope.scene.sort2 = 'most_recent'; 
     boxsetService.viewAllBoxSetsByDate(0).then(function (data) { 
      $scope.allBoxsets = data; 
     }); 
    }; 

    $scope.loadByNumbers = function() { 
     $scope.scene.sort2 = 'by_numbers'; 
     boxsetService.viewAllBoxSetsByNumber(0).then(function (data) { 
      $scope.allBoxsets = data; 
     }); 
    }; 

    $(window).scroll(function() { 
     if ($(window).scrollTop() + $(window).height() > $(document).height() - scrollZise) { 
      $scope.count2 = $scope.count2 + 8; 
      console.log("New count box set : ", $scope.count2); 

      if ($scope.scene.sort2 == 'most_recent') { 
       boxsetService.viewAllBoxSetsByDate($scope.count2).then(function (data) { 
        for (var i = 0; i < data.length; i++) { 
         $scope.allBoxsets.push(data[i]); 
        } 
       }); 
      } else if ($scope.scene.sort2 == 'popularity') { 
       boxsetService.viewAllBoxSetsByPopularity($scope.count2).then(function (data) { 
        for (var i = 0; i < data.length; i++) { 
         $scope.allBoxsets.push(data[i]); 
        } 
       }); 
      } else if ($scope.scene.sort2 == 'name') { 
       boxsetService.viewAllBoxSetsByName($scope.count2).then(function (data) { 
        for (var i = 0; i < data.length; i++) { 
         $scope.allBoxsets.push(data[i]); 
        } 
       }); 
      } else if ($scope.scene.sort2 == 'number_of_scenes') { 
       boxsetService.viewAllBoxSetsByScenes($scope.count2).then(function (data) { 
        for (var i = 0; i < data.length; i++) { 
         $scope.allBoxsets.push(data[i]); 
        } 
       }); 
      } else if ($scope.scene.sort2 == 'by_letter') { 
       boxsetService.viewAllBoxSetsByLetter($scope.selectedLetter, $scope.count2).then(function (data) { 
        console.log("Sekected letter : ", $scope.selectedLetter); 
        for (var i = 0; i < data.length; i++) { 
         $scope.allBoxsets.push(data[i]); 
        } 
       }); 
      } else if ($scope.scene.sort2 == 'by_numbers') { 
       boxsetService.viewAllBoxSetsByNumber($scope.count2).then(function (data) { 
        for (var i = 0; i < data.length; i++) { 
         $scope.allBoxsets.push(data[i]); 
        } 
       }); 
      } 
     } 
    }); 

}); 

Это контроллер, который загрузки Boxsets. А также есть еще один контроллер, который использует чтобы получить некоторые другие сцены. Вот что контроллер.

angular.module('data_visualize') 
.controller('SceneCtrl', function ($scope, sceneService) { 

    $('html,body').scrollTop(0); 

    /** 
    * Initializing and defining all the 
    * arrays and variables. 
    * @type {Array} 
    */ 
    $scope.allScenes = []; 
    $scope.count = parseInt(0); 
    $scope.scene = { 
     sort: "most_recent" 
    }; 

    /** 
    * Loading all the scenes with limit and offset. 
    * Default page load invoke method for data set. 
    */ 
    sceneService.viewAllScenesByDate(0).then(function (data) { 
     $scope.allScenes = data; 
    }); 

    $scope.getVideosByLetter = function (event) { 

     console.log("Filter : ", $scope.filter); 

     if ($scope.filter == "" || $scope.filter == null) { 
      sceneService.viewAllScenesByDate(0).then(function (data) { 
       $scope.allScenes = data; 
      }); 
     } else { 
      $scope.scene = { 
       sort: "by_letter" 
      }; 
      sceneService.viewAllScenesByLetter($scope.filter, 0).then(function (data) { 
       $scope.allScenes = data; 
       console.log(data); 
      }); 
     } 
    }; 

    /** 
    * Get drop down value and send to server 
    * in order to get the response. 
    */ 
    $scope.getSceneSortByValue = function() { 
     $scope.count = parseInt(0); 
     $scope.sortValue = $scope.scene.sort; 
     console.log($scope.sortValue); 

     if ($scope.sortValue == 'most_recent') { 
      sceneService.viewAllScenesByDate(0).then(function (data) { 
       $scope.allScenes = data; 
      }); 
     } else if ($scope.sortValue == 'popularity') { 
      sceneService.viewAllScenesByPopularity(0).then(function (data) { 
       $scope.allScenes = data; 
      }); 
     } else if ($scope.sortValue == 'name') { 
      sceneService.viewAllScenesByName(0).then(function (data) { 
       $scope.allScenes = data; 
      }); 
     } else { 
      sceneService.viewAllScenesByDate(0).then(function (data) { 
       $scope.allScenes = data; 
      }); 
     } 
    }; 

    /** 
    * Detect window scroll and send request 
    * to sever to get the real time pagination. 
    */ 
    $(window).scroll(function() { 
     if ($(window).scrollTop() + $(window).height() > $(document).height() - scrollZise) { 
      $scope.count = $scope.count + 8; 
      console.log("NEW Count scene: ", $scope.count); 

      if ($scope.scene.sort == 'most_recent') { 
       sceneService.viewAllScenesByDate($scope.count).then(function (data) { 
        for (var i = 0; i < data.length; i++) { 
         $scope.allScenes.push(data[i]); 
        } 
       }); 
      } else if ($scope.scene.sort == 'popularity') { 
       sceneService.viewAllScenesByPopularity($scope.count).then(function (data) { 
        for (var i = 0; i < data.length; i++) { 
         $scope.allScenes.push(data[i]); 
        } 
       }); 
      } else if ($scope.scene.sort == 'name') { 
       sceneService.viewAllScenesByName($scope.count).then(function (data) { 
        for (var i = 0; i < data.length; i++) { 
         $scope.allScenes.push(data[i]); 
        } 
       }); 
      } else if ($scope.scene.sort == 'by_letter') { 
       sceneService.viewAllScenesByLetter($scope.filter, $scope.count).then(function (data) { 
        for (var i = 0; i < data.length; i++) { 
         $scope.allScenes.push(data[i]); 
        } 
       }); 
      } 
     } 
    }); 

}); 

Эти два контроллера, который имеет две различные точки зрения. Когда эти взгляды прокрутке, данные загружаются в PAGINATION. Вот пример HTML-код зрения HTML. данные loadi ng с ng-repeat.

<div ng-repeat="data in allBoxsets"> 
    <div class="col-lg-3 col-md-4 col-xs-6"> 
     <a class="thumbnail" href="#/boxset/{{data.seriesid}}"> 
      <img class="img-responsive" src="lib/images/banner_selection/films/gallery/{{data.imagepath}}" 
       alt=""> 
      <div class="row"> 
       <div class="col-lg-12"> 
        {{data.seriesname}} 
       </div> 
       <div class="col-lg-12"> 
        Views : {{data.views}} 
       </div> 
       <div class="col-lg-12"> 
        Scenes : {{data.scenes}} 
       </div> 
      </div> 

     </a> 
    </div> 
</div> 

Но вот проблема, когда я просмотре сцен с использованием SceneCtrl, они загружаются, но проблема Boxset контроллер также получаете активированную и при прокрутке страницы, эти Boxset запросы отправляются на сервер слишком , Так что очень медленно загружать данные. В чем проблема? Есть ли способ сделать это правильно.

Когда я использую Сцены, мне нужно активировать SceneCtrl, и когда я использую Boxsets, мне нужно использовать BoxsetCtrl.

Любые предложения приветствуются.

Answer 1

В принципе, простой способ для вас - использовать либо ng-route, либо ui-router. Я предлагаю последний. Таким образом, вы можете четко обозначить представление и контроллер, связанные с этим представлением, вы также можете использовать другие дополнительные функции, предоставляемые «ui-router».

Например посмотреть на код ниже:

angular.module('app', ['ui.router']) 
 
    .config(function($stateProvider, $urlRouterProvider) { 
 

 
    // State definitions 
 
    $stateProvider 
 
     .state('homeState', { 
 
     url: '/home', 
 
     template: '<div> {{ title }} ' + 
 
      '<button data-ng-click="gotoState(\'homeState.stateA\')" >GoTo A</button>' + 
 
      '<button data-ng-click="gotoState(\'homeState.stateB\')" >GoTo B</button>' + 
 
      '<div ui-view><div>' + 
 
      '</div>', 
 
     controller: 'HomeController' 
 
     }) 
 

 
     .state('homeState.stateA', { 
 
     url: '/stateA', 
 
     template: '<div> {{ data }} </div>', 
 
     controller: 'StateAController' 
 
     }) 
 

 
     .state('homeState.stateB', { 
 
     url: '/stateB', 
 
     template: '<div> {{ data }} </div>', 
 
     controller: 'StateBController' 
 
     }); 
 

 
    // Default to stateA 
 
    $urlRouterProvider.otherwise('/home'); 
 
    }) 
 
    .controller('HomeController', function($scope, $state) { 
 
    // homeState data 
 
    $scope.title = 'State example'; 
 

 
    $scope.gotoState = function(stateName) { 
 
     $state.go(stateName); 
 
    }; 
 
    }) 
 
    .controller('StateAController', function($scope) { 
 
    // StateA data 
 
    $scope.data = 'Hi State A'; 
 
    }) 
 
    .controller('StateBController', function($scope) { 
 
    // StateB data 
 
    $scope.data = 'Hi State B'; 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script> 
 

 
<div data-ng-app="app"> 
 

 
    <!-- This is the ui-view, marks the area where the content should  be rendered --> 
 
    <div ui-view></div> 
 
</div>