Angular UI Bootstrap에서 modal과 non-modal 형태에 동일한 컨트롤러를 사용하는 방법?

Angular UI Bootstrap에서 modal과 non-modal 형태에 동일한 컨트롤러를 사용하는 방법?

등록 양식이 있는 모달을 가지고 있습니다.동일한 양식이 모달이 아닌 랜딩 페이지 하단에 표시되어야 합니다.

현재 등록 모드 테이크를 처리하는 컨트롤러$modalInstance그 매개변수의 하나로서.$scope기타. 추가하면.ng-controller="SignUpCtrl"랜딩 페이지의 요소에 대해, 컨트롤러가 다음을 통해 생성되지 않았기 때문에 작동하지 않습니다.$modal.open방법과 그래서 Angular가 불평합니다.Unknown provider: $modalInstanceProvider <- $modalInstance.

사용자 등록 서비스가 있습니다 (authService.signUp(data).then/catch...), 컨트롤러 자체는 입력을 처리하고 이벤트를 내보내고(예: 번역된 오류 메시지) 쿠키를 설정하는 등 좀 더 많은 작업을 수행합니다.

거의 모든 컨트롤러 코드를 복제하지 않고 이러한 경우를 처리하는 가장 좋은 방법은 무엇입니까?컨트롤러에서 다른 고급 서비스로 코드를 옮겨야 합니까?

오랜 시간 고심한 끝에, 저는 모달 케이스와 일반 케이스 모두에 대해 컨트롤러를 재사용할 수 있는 더 쉬운 방법을 찾았습니다.

저는 발신자의 범위를 모달 컨트롤러로 전달할 수 있다는 것을 발견하여 modalInstance를 $scope로 밀어 모달 컨트롤러로 전달했습니다.$scope는 잘 알려진 문제이기 때문에 알 수 없는 공급자 문제는 없습니다.

다음은 예시입니다.

CallerController = function($rootScope, ...) {
   var modalScope = $rootScope.$new();
   modalScope.modalInstance = $modal.open({
        templateUrl: tempUrl,
        controller: ReusableModalController,
        scope: modalScope // <- This is it!
    });

    modalScope.modalInstance.result.then(function (result) {
        // Closed
    }, function () {
        // Dismissed
    });
};

ReusableModalController = function($scope, ...){
    var dataToSendBack = 'Hello World';
    $scope.modalInstance.close(dataToSendBack);
};

건배!

ui-router를 사용하는 경우 ui-router의 확인을 사용하여 $uibModalInstance($modal)를 제공할 수 있습니다.인스턴스(이전):

$stateProvider
.state('conductReview', {
    url: '/review',
    templateUrl: '/js/templates/review.html',
    controller: 'yourController',
    resolve: {
        $uibModalInstance: function () { return null; } // <- workaround if you want to use $uibModalInstance in your controller.
    }
})

그렇게 하면 일반 컨트롤러처럼 모달 컨트롤러를 사용할 수 있습니다.컨트롤러에 $uibModalInstance를 주입하면 null이 됩니다.

모드 양식과 랜딩 페이지 양식 모두에 동일한 컨트롤러를 사용하려면 다음을 사용합니다.

modalInstance.result.then(function (selectedItem) { $scope.selected = selectedItem; }, function () { $log.info('Modal dismissed at: ' + new Date()); });

모든 데이터를 모달 폼에서 가져올 수 있습니다.selectedItem랜딩 페이지 형태로 사용할 수 있습니다.그리고 모달은 어떻게 여나요?버튼을 통해 작동하는 경우 ng-model을 다음을 사용하여 열도록 바인딩합니다.$modal.open.모달용 컨트롤러를 따로 만들지 마십시오.랜딩 페이지와 동일한 것을 사용합니다.이렇게 하면 1개의 컨트롤러를 사용하여 모달을 닫고 다른 기능뿐만 아니라 모달을 열 수 있습니다.

추신: 여기에 주어진 코드 조각은 angular ui의 페이지에서 가져온 것입니다.해당 페이지의 문서에서 다음을 확인합니다.selectedItem

언급URL : https://stackoverflow.com/questions/23780950/how-to-use-the-same-controller-for-modal-and-non-modal-form-in-angular-ui-bootst