Избегайте повторное действие переменным в различных контроллерах в AngularJS

Question

У меня есть несколько контроллеров, работающих с различными шаблонами:

curryApp.config(['$routeProvider', 
    function($routeProvider) { 
     $routeProvider. 
     when('/', { 
      templateUrl: 'table_index.html', 
      controller: 'CurryListCtrl' 
     }). 
     when('/cities/:cityId/', { 
      templateUrl: 'template-total.html', 
      controller: 'CurryDetailCtrl' 
     }). 
     when('/cities/:cityId/mobile/', { 
      templateUrl: 'template-mobile.html', 
      controller: 'CurryMobileCtrl' 
     }). 
     when('/cities/:cityId/online/', { 
      templateUrl: 'template-online.html', 
      controller: 'CurryOnlineCtrl' 
     }). 

Все контроллеров диссертаций $ переменной сферы называемых cities Например, первым:

curryControllers.controller('CurryDesktopCtrl', ['$scope', '$routeParams', '$http', '$route', 
    function($scope, $routeParams, $http, $route) { 
    $scope.cityId = $routeParams.cityId; 
    $http.get('json/cities.json').success(function (data) { 
     $scope.cities = data; 
     ... 

Второй:

curryControllers.controller('CurryOnlineCtrl', ['$scope', '$routeParams', '$http', '$route', 
    function($scope, $routeParams, $http, $route) { 
    $scope.cityId = $routeParams.cityId; 
     $http.get('json/cities.json').success(function(data) { 
     $scope.cities = data; 
     ... 

Можно ли повторить переменные $ scope в разных контроллерах? Как мне реорганизовать код, чтобы избежать дубликатов?

Answer 1

Вы можете создать фабрику:

.factory('citiesFactory', function($http) { 
    function getCities(){ 
     // return promise from function 
     return $http.get("json/cities.json"); 
    } 

    return { 
     getCities: getCities 
    } 
}); 

затем в контроллере:

curryControllers.controller('CurryDesktopCtrl', ['$scope', '$routeParams', '$http', '$route', 'citiesFactory' 
    function($scope, $routeParams, $http, $route, citiesFactory) { 
    $scope.cityId = $routeParams.cityId; 
    citiesFactory.getCities().then(function(response){ 
     $scope.cities = response.data; 
    }); 
     ... 

Answer 2

Если города не собираются менять для каждого использования контроллера услуг, как показано ниже

Ваша служба должна выглядеть, как показано ниже

app.service('myService',function($http,$q){ 
     var cities=null; 
     this.getCities=function() 
        { 

         var deferred = $q.defer() 
         if(this.cities==null){ 
         $http.get('json/cities.json') 
         .then((response) => {deferred.resolve(response);cities=response;}) 
         .catch((error) => deferred.reject(error)) 
         } 
         else { deferred.resolve(cities)} 
         return deferred.defer 

        }) 
     }); 

Используйте выше службы в контроллере

app.controller('ctrl',function($scope,myService){ 
      myService.getCities().then(function(data){ $scope.cities = data;}) 
    }) 

Answer 3

Если Города json распространены для всех контроллеров.

Одним из вариантов было бы перемещение общего объекта, используемого в контроллерах, в корневой каталог refer.

Другой вариант - хранить города json в самой службе, читать here.

Answer 4

Вы должны сделать создать фабрику, как это. Простите синтаксис, но вы получите эту идею.

app.factory('Cities', function ($http) { 
return { 
    'getData': function() { 
     $http.get('json/cities.json').success(function (data) { 
      return data; 
      } 
      .error(function(error){ 
      return []; 
      } 
    } 
}; 

}]);

и в контроллере впрыскивать фабрику и получить данные

curryControllers.controller('CurryOnlineCtrl', ['$scope', '$routeParams', '$http', '$route', 'Cities' 
    function($scope, $routeParams, $http, $route) { 
    $scope.cityId = $routeParams.cityId; 
    $scope.cities = Cities.getData(); 
    ...