angular-ui 모달이 처음에는 숨겨져 있지 않습니다.

Question

내 uim에 모달 대화 상자를 추가하려는 경우 다음을 따르고 있습니다. angular recipes page. 내 견해 중 하나에 추가 한 다음 마크 업을 제안합니다. 내가보고 싶은

... html for my view is here ... 
<button class="btn" ng-click="open()">Open Modal</button> 
<div modal="showModal" close="cancel()"> 
    <div class="modal-header"> 
     <h4>Modal Dialog</h4> 
     ... etc, from the recipe doc 
</div> 

내보기, 플러스 바닥과 아무것도에 "열기 모달"버튼입니다. 대신에 단추와 모달의 내용이 이미 페이지에 표시됩니다. 레시피 문서에서

바로 다음 단어는 우리가 명시 적으로 모달 대화 가 모달 속성을 통해 초기에 숨겨져을 지정하지 않더라도

참고. 컨트롤러 만이 버튼 클릭과 모달 속성에 사용되는 showModal 값을 처리합니다.

왜 내 모달 마크가 페이지에 처음으로 표시됩니까? 내가 제대로 각-UI를 설치 한 생각 ... 내 index.html을에 :

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> 

그리고 내 응용 프로그램 JS에서

: 조리법 페이지가 구식 인 것 같다

angular.module('MonteAdmin', [ 
    ... 
    'ui.bootstrap', 
    ... 
    ]) 

Answer 1

있다. 작성 당시 변수 showModal을 modal 지시문에 전달하여이를 표시하거나 숨길 수있었습니다. 컨트롤러에서는 true 또는 false로 범위 변수 showModal를 설정하여 모달을 보여줄 수 있었을 것이다 :

$scope.showModal = false; 

$scope.open = function() { 
    $scope.showModal = true; 
} 

현재 버전은 그런 식으로 작동하지 않습니다. 라이브러리의 최신 버전을 사용하는 경우 Angular UI Bootstrap

에서 라이브러리에 대한 공식 문서를 읽으면 당신은 더 나은 경험이있을 것이다,이 지침은 더 이상 modal하지만 uib-modal 없습니다. 또한 모달을 구현하는 데 더 많은 작업이 필요합니다.

<script type="text/ng-template" id="stackedModal.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3> 
    </div> 
    <div class="modal-body" id="modal-body-{{name}}"> 
     Having multiple modals open at once is probably bad UX but it's technically possible. 
    </div> 
</script> 

실제로 모달를 열려면 버튼을 클릭이 다음 예 기능을 트리거한다 :

모달 마크 업 공식 예에 따라 text/ng-template로 설정 유형, 스크립트 태그에 있어야합니다

var modalInstance = $uibModal.open({ 
    animation: $ctrl.animationsEnabled, 
    ariaLabelledBy: 'modal-title', 
    ariaDescribedBy: 'modal-body', 
    templateUrl: 'myModalContent.html', 
    controller: 'ModalInstanceCtrl', 
    controllerAs: '$ctrl', 
    size: size, 
    appendTo: parentElem, 
    resolve: { 
    items: function() { 
     return $ctrl.items; 
    } 
    } 
}); 

또한, 자신을 모달위한 컨트롤러를 정의해야합니다

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) { 
    var $ctrl = this; 
    $ctrl.items = items; 
    $ctrl.selected = { 
    item: $ctrl.items[0] 
    }; 

    $ctrl.ok = function() { 
    $uibModalInstance.close($ctrl.selected.item); 
    }; 

    $ctrl.cancel = function() { 
    $uibModalInstance.dismiss('cancel'); 
    }; 
}); 

,

이 코드는 모두 Angular UI Bootstrap의 공식 설명서에서 찾을 수 있습니다.