컨트롤러와 앵귤러 부트스트랩 $modal 간의 데이터 공유

Question

저는 Angular-bootstrap $modal을 사용하고 있으며 컨트롤러와 모달 간에 데이터를 공유하는 방법을 이해하는 데 문제가 있습니다.

제어 장치:

app.controller 'MainController', ($scope, $templateCache) ->      
  $scope.openModal = ->
    modal = $modal.open(
      template: $templateCache.get('modal.html')
      controller: modalController
      size: 'sm'
      resolve:
        repository: ->
          $scope.repository
    )

모달:

modalController = ($scope, $modalInstance, repository) ->
  $scope.repository = repository

  $scope.update = (other_repo) ->
    $scope.repository = other_repo  
    $modalInstance.dismiss('cancel')

이 시점에서 나는 예상한다. $scope.repository 모달에서 변경되면 MainController에서 업데이트되지만 그렇지 않습니다.

내가 무엇을 놓치고 있나요?

감사합니다

Answer 1

모달 컨트롤러는 모달을 열었던 컨트롤러와 다른 범위를 가지고 있습니다.대화 상자에서 일부 데이터를 닫으면 문서 :

modal = $modal.open(...);

modal.result.then(function (otherRepo) {
  $scope.repository = otherRepo;
}

.

Answer 2

컨트롤러의 범위를 $modal에 전달하지 않으면 $rootScope에서 프로토타입으로 상속된 새 범위가 생성됩니다. var modalScope = (modalOptions.scope || $rootScope).$new(); 이 것에서는 오프너의 컨트롤러 범위에 대한 연결이 없습니다.그러나 이를 여는 컨트롤러의 모달 범위로 전달할 수 있습니다.

  $scope.open = function (size) {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      size: size,
      scope: $scope
    });

이번에는 범위를 ModalInstanceCtrl 상위 컨트롤러의 범위를 상속하고 모든 변경 사항은 오프너 컨트롤러의 범위에 반영됩니다.

이 플런커를 보세요(Bootstrap-UI의 샘플이 약간 변경되었습니다) selected 모달에서 업데이트된 오프너 범위의 객체와 이 업데이트는 다음과 같은 관점에서 즉시 반영됩니다. ModalDemoCtrl 제어 장치.