AngularJS : UI 라우터 모달 - 부모 범위

Question

모달을 여는 응용 프로그램에 버튼이 있습니다. 이 모달은 UI 루트 상태에서 새 URL로 반대되도록 구성됩니다.

모달 컨트롤러에서 부모 $ 범위에 액세스해야합니다. 부모 $ scope에는 todolist.add라는 자식 상태에서 액세스해야하는 배열이 있습니다.

부모 $ 범위에 액세스해야하는 이유는 무엇입니까? 왜냐하면 나는 서버를 다시 호출하지 않고 부모 $ scope 데이터를 조작하려고하기 때문입니다.

UI 라우터에서 상위 범위에 액세스하는 가장 좋은 방법은 무엇입니까?

// routes 

$stateProvider 
      .state('todolist', { 
       url: '/todo-list', 
       views: { 
        '@': { 
         ..., 
         controller: 'ListsController' 
        } 
       } 
      }) 
      .state('todolist.add', { 
       url: '/list/add', 
       onEnter: ['$state', '$uibModal', function ($state, $uibModal) { 
        $uibModal.open({ 
         ..., 
         controller: 'FormListModalController' // <- in this controller I need to access the $scope from the parent 
        }).result.finally(function() { 
         ... 
        }); 
       }] 
      })... 

.

.controller('ListsController', function ($scope, ...) { 
     $scope.lists = []; // there are data in this $scope array 
    }); 

.

.controller('FormListModalController', function ($scope, ...) { 
     $scope.$parent.todolist.lists; // <- in this Modal's Ctrl I need to access the parent $scope (ListsController) 
    }); 

Answer 1

당신이하려는 것은 실제로 작동하지 않습니다. 'todolist.add'상태 컨트롤러가 모달 (팝업) 컨트롤러와 공유되지 않기 때문입니다. 귀하의 경우에는 'todolist.add'에 비어있는 컨트롤러가 있고 onClick 메서드는 FormListModalController 컨트롤러를 사용합니다.

해결 방법 1 : STATE의 PARAMS +는

를 해결 나는 두 상태 및 모달 사이의 $ 범위에서 데이터 복사를 수행하여이 문제를 해결 : 부모 상태 -> 아이의 상태 -> 모달.

샘플을 검색 할 수 있습니다 :

• 집 상위 컨트롤러와

• home.popup tocopy라는 변수를 가지고는 팝업을 여는 자식 상태

  angular.module('test', [ 'ui.bootstrap', 'ui.router' ]); 
  
  angular.module('test').config(['$stateProvider', '$urlRouterProvider', 
      function($stateProvider, $urlRouterProvider, $stickyStateProvider, $locationProvider) { 
       $urlRouterProvider.otherwise("/home"); 
  
       $stateProvider 
       .state('home', { 
        url     : '/home', 
        templateUrl   : './home.html', 
        controller   : 'homeController' 
       }) 
       .state('home.popup', { 
        url     : '/popup', 
        params    : {tocopy: null}, 
        onEnter: ['$state', '$stateParams', '$uibModal', function ($state, $stateParams, $uibModal) { 
         $uibModal.open({ 
          templateUrl: './popup.html', 
          controller: 'popupController', 
          resolve: { 
           tocopy: function() { 
            return $stateParams.tocopy; 
           } 
          } 
          }).result.finally(function() { 
           $state.go('^'); 
          }); 
        }] 
       }) 
  }]); 
  
  angular.module('test').controller('homeController', function($scope, $state) { 
      $scope.tocopy = "hello"; 
  
      $scope.openPopup = function() { 
       $state.go('home.popup', { tocopy: $scope.tocopy}); 
      }; 
  
  }); 
  angular.module('test').controller('popupController', function($scope, $state, tocopy) { 
      $scope.tocopy = tocopy; 
  }); 
  

트릭은 사용

• PARAMS 상태가 다른
• 해결에 상태에서 변수를 전달하기 위해 컨트롤러를

해결이 모달 상태에서 변수를 전달하는 : 스토리지 서비스를

큰 데이터 세트의 경우, 다른 솔루션은 데이터를 서비스에 저장하는 것으로 구성 될 수 있습니다. 모든 컨트롤러가 액세스 할 수 있어야합니다.

angular.module('test', [ 'ui.bootstrap', 'ui.router' ]); 

angular.module('test').config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider, $stickyStateProvider, $locationProvider) { 
     $urlRouterProvider.otherwise("/home"); 

     $stateProvider 
     /******************************************************* 
     * HOME 
     *******************************************************/ 
     .state('home', { 
      url     : '/home', 
      templateUrl   : './home.html', 
      controller   : 'homeController' 
     }) 
     .state('home.popup', { 
      url     : '/popup', 
      onEnter: ['$state', '$stateParams', '$uibModal', function ($state, $stateParams, $uibModal) { 
       $uibModal.open({ 
        templateUrl : './popup.html', 
        controller : 'popupController', 
        windowClass : 'center-modal' 
       }).result.finally(function() { 
        $state.go('^'); 
       }); 
      }] 
     }) 
}]); 

angular.module('test').service('storageService', function() { 
     var data; 

     return { 
      getData: function() { return data; }, 
      setData: function(value) { data = value; } 
     }; 
}); 

angular.module('test').controller('homeController', function($scope, $state, storageService) { 
    $scope.tocopy = "hello"; 

    $scope.openPopup = function() { 
     storageService.setData($scope.tocopy); 
     $state.go('home.popup'); 
    }; 

}); 
angular.module('test').controller('popupController', function($scope, $state, storageService) { 
    $scope.tocopy = storageService.getData(); 
}); 

예 : 당신이보고 싶을 경우 내가 GitHub에 내 예를 밀어 : 코드

https://github.com/gjeanmart/stackexchange/tree/master/43823794