구성 요소를 사용하여 각도 UI 부트 스트랩 모달에서 인수를 전달하고 검색하는 방법

Question

저는 modal을 구성 요소로 정의하고 uiModal.open을 사용하여 해당 모달을 여는 간단한 사례가 있습니다. 그러나 컨트롤러 생성자의 열린 메서드 및 인수에서 "해결"을 사용하여 해당 사용자 지정 데이터를 해당 모달에 전달하려는 경우 데이터가 전달되지 않습니다. 또한 $ uibModalInstance를 삽입하려고하면 알 수없는 공급자 ($ uibModalInstanceProvider < - $ uibModalInstance)로 실패하므로 모달을 닫는 동안 결과를 반환 할 수 없습니다.

템플릿 :

<div class="modal-header"> 
    <h3 class="modal-title" id="modal-title">Modal</h3> 
</div> 
<div class="modal-body" id="modal-body"> 
    Some text 
     <div class="row"> 
      <div class="col-sm-10"> 
        <textarea class="form-control" name="closureNotes" rows="6" data-ng-model="vm.closureNote" required> 
        </textarea> 
      </div> 
     </div> 

</div> 

<div class="modal-footer"> 
    <button class="btn btn-default btn-close" type="submit" ng-click="vm.ok()">Close Exception Request</button> 
    <button class="btn btn-danger" type="button" ng-click="vm.cancel()">Cancel</button> 
</div> 

구성 요소 :

import template from './closeExceptionModal.html'; 
import controller from './closeExceptionModal.controller'; 

let closeExceptionModalComponent = { 
    restrict: 'E', 
    bindings: { 
     resolve: '<', 
    close: '&', 
    dismiss: '&' 
    }, 
    template, 
    controller, 
    controllerAs: 'vm' 
}; 

export default closeExceptionModalComponent; 

컨트롤러 :

class CloseExceptionModalController { 

    constructor() { 
     //I need to retrieve here some data from caller 
    } 

    ok() { 
     this.close(); //I need to pass here result to caller using modalInstance.close 
    } 

    cancel() { 
     this.dismiss(); 
    } 
} 

export default CloseExceptionModalController; 

발신자 컨트롤러 코드 :

//I need to pass some data to modal 
let modalInstance = this.$uibModal.open({ 
    animation: true, 
    component: 'closeExceptionModal', 
    appendTo: angular.element(document.body), 
}) 

modalInstance.result.then((result) => { 
    alert(result); //this must be result data from modal 
},() => { 
}); 

Answer 1

내가 그 문제를 연구하는 거의 3 시간 동안, 나는 내가 유래에 스레드를 많이 검색, 내가 해결하고 생성자 인수를 시도 .. 통과 $ modalInstance, $ uibModalInstance 등으로 시도 각각은 ui.bootstrap, angularjs 등을 업그레이드 할 것을 제안하지 않습니다.

핵심 이슈는 다른 방식으로 시도하려는 것이 구성 요소를 사용하여 모달을 정의하지 않고 인라인으로 컨트롤러를 정의하고 템플릿을 지정하는 것입니다 "발신자"컨트롤러의 코드.

마지막으로 많은 스레드에서 수집 된 일부 부분적인 지식을 사용하여이 멋지고 쉬운 해결책을 찾았습니다.

import template from './closeExceptionModal.html'; 
import controller from './closeExceptionModal.controller'; 

let closeExceptionModalComponent = { 
    restrict: 'E', 
    bindings: { 
     resolve: '<', //this let us pass any data from caller constructor 
    modalInstance: '<', //modalInstance will be auto injected 
    close: '&', 
    dismiss: '&' 
    }, 
    template, 
    controller, 
    controllerAs: 'vm' 
}; 

export default closeExceptionModalComponent; 

모달의 호출은 다음과 같아야합니다 :

let modalInstance = this.$uibModal.open({ 
    animation: true, 
    component: 'closeExceptionModal', 
    appendTo: angular.element(document.body), 
    resolve: { 
     modalData: function() { 
      return "test"; 
     } 
    } 
}) 

modalInstance.result.then((result) => { 
    alert(result); 
},() => { 
}); 

는 우리가해야 할 모든 구성 요소 정의 바인딩 섹션을 업데이트입니다 구성 요소를 기반으로 모달 및 modalInstance에 데이터를 전달하려면

최종 모달 컨트롤러는 다음과 같습니다.

class CloseExceptionModalController { 

    constructor() { 
     this.$ctrl = this; //we store the controller instance 

     console.log(this.$ctrl.resolve.modalData); //here is my input data 
    } 

    ok() { 
     //modal instance is auto injected and we can call close passing result 
     this.$ctrl.modalInstance.close(this.closureNote); 
    } 

    cancel() { 
     this.dismiss(); 
    } 
} 

export default CloseExceptionModalController; 

다른 사람들이 ui bootstrap 모달을 구성 요소로 사용하고 데이터를 전달/전달하는 데 도움이되기를 바랍니다. :)