angularjs로 modal (ui-bootstrap)을 띄우고 값 주고받기.

AngularJS 로 bootstrap 의 Modal을 사용하는 예제이다.

ui-bootstrap 은 2.5.0 을 사용했고

angularjs는 1.6 버전을 사용했다.

팝업을 띄우고, 

해당 팝업에 파라미터를 전달하고,

OK를 눌렀을때 부모창에 인자값을 던진다.

<!-- 크기별로 button을 만들었다. -->

<div ng-controller="TestCtrl">

<h2>Modal PopUp 테스트</h2>

<button type="button" class="btn btn-default btn-lg"

ng-click="showModal()">Modal 팝업띄우기(normal)</button>

<button type="button" class="btn btn-default btn-lg"

ng-click="showModal('sm')">Modal 팝업띄우기(sm)</button>

<button type="button" class="btn btn-default btn-lg"

ng-click="showModal('lg')">Modal 팝업띄우기(large)</button>

</div>

위의 코딩을 하면 아래처럼 화면이 나온다.

컨트롤(TestCtrl)을 선언한 TestController.js 파일 내부.

var testApp = angular.module("testApp", ["ui.bootstrap"]);

testApp.controller('TestCtrl', TestCtrl);

TestCtrl.$inject = ['$scope', '$uibModal'];             

function TestCtrl($scope, $uibModal){                 // Modal을 사용할거면 $uibModal 를 선언해야 한다.

var $ctrl = this;

$ctrl.items = ["apple", "banana", "grape"];

// 여기서부터 Modal팝업 띄우는 부분. 

// 파라미터로 받는 size에 따라 크기가 다르게 띄운다.

$scope.showModal = function(size){

var modalInstance = $uibModal.open({

templateUrl: 'template/modal_pop.html',         // 템플릿 html의 위치를 지정해주고.

// 절대로 html파일안에 ng-controller를 

// 선언하지 않는다.(여기서 컨트롤러를 지정// // 해줘야 한다)

controller: 'ModalInstanceCtrl',                     // 컨트롤러 이름을 지정한다.

size: size,

resolve: {

items: function () {                     // 여기선 Modal로 추가 파라미터를 줄 수 있다

return $ctrl.items;

}

}

});

// Modal 이 닫혔을때(OK든, 취소든) 받는 이벤트 부분이다. 선언하지 않으면 전달받지 못한다.

modalInstance.result.then(function (selectedItem) {         // OK일 경우 받는 것.

console.log("modal click ok : " + selectedItem);

}, function () {         // 그냥 닫았을때 받는것.

console.log('modal에서 dismissed at: ' + new Date());

});

}

}

// Modal 팝업에 사용할 컨트롤러를 선언한다.

angular.module('testApp').controller('ModalInstanceCtrl', ModalInstanceCtrl)

// $uibModalInstance 가 중요하다. 이걸 통해서 부모창에 파라미터를 던질 수 있다.

function ModalInstanceCtrl($scope, $uibModalInstance, items){

console.log( items);         // 위의 resolve 에서 선언한 items의 값이 넘어온 것을 확인할 수 있다.

// ok 버튼을 눌렀을때

$scope.ok = function(){         

// 여기서는 간단하게 items안의 0번째 값을 리턴해주는걸로 했다.

$uibModalInstance.close(items[0]);

}

// cancel 버튼을 눌렀을때

$scope.cancel = function() {   

$uibModalInstance.dismiss('cancel');

}

}

modal_pop.html 파일의 내용

<div>

        <div class="modal-header">

            <h3 class="modal-title" id="modal-title">I'm a modal!</h3>

        </div>

        <div class="modal-body" id="modal-body">

        </div>

        <div class="modal-footer">

            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>

            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>

        </div>

<div>

Modal 을 띄운후 OK를 누르면 Console창에 다음과 같은 메세지가 뜬다.