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'
        }).

所有这些控制器都有$ scope变量名为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

如果城市不会因为下面的每个控制器使用服务而改变

您的服务应如下所示

 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 2

您可以创建工厂：

.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 3

您应该创建这样的工厂。原谅语法，但你明白了。

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();
    ...

Answer 4

如果城市json对所有控制器都是通用的。

一种选择是将跨控制器使用的公共对象移动到rootcope refer。

其他选项是将json存储在服务本身中，并显示here。

避免AngularJS中不同控制器中的重复范围变量

4 个答案: