JavaScript를 사용하여 AngularJS Bootstrap UI에서 모달 창 호출

JavaScript를 사용하여 AngularJS Bootstrap UI에서 모달 창 호출

---

여기 에 언급 된 예제를 사용하여 버튼을 클릭하는 대신 JavaScript를 사용하여 모달 창을 호출하는 방법을 사용합니까?

저는 AngularJS를 처음 접했고 여기 와 여기 에서 문서를 검색해 보았습니다 .

감사합니다

---

좋아, 먼저 http://angular-ui.github.io/bootstrap/ 에는 <modal>지시문과 $dialog서비스가 두 가지 가지 모달 창을 여는 데 사용할 수 있습니다.

내용 은 <modal>모달 의 지시문 내용이 호스팅 템플릿 (모달 창을 트리거하는 템플릿)에 포함되는 것입니다. 이 $dialog서비스는 훨씬 더 유연하며 별도의 파일에서 모달의 콘텐츠를로드 할 수 있습니다. 모든 위치에서 AngularJS 코드를 실행할 수 있습니다 (다른 컨트롤러, 서비스 또는 지시문).

"자바 펼쳐 코드 사용"이 정확히 무엇을 의미하는지 확실하지 않지만 AngularJS 코드의 모든 위치를 의미합니다 가정하면 $dialog서비스가 갈 방법 일 것입니다.

사용하기 매우 간단한 형식으로 다음과 같이 사용할 수 있습니다.

$dialog.dialog({}).open('modalContent.html');  

모든 JavaScript 코드에 의해 실제로 트리거 될 수있는 것을 설명하기 위해 컨트롤러가 인스턴스화되고 3 초 후에 타이머로 모달을 트리거하는 버전이 있습니다.

function DialogDemoCtrl($scope, $timeout, $dialog){
  $timeout(function(){
    $dialog.dialog({}).open('modalContent.html');  
  }, 3000);  
}

이것은 플렁크에서 볼 수 있습니다 : http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview

마지막으로 여기에 $dialog설명 된 서비스에 대한 전체 참조 문서가 있습니다. https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md

---

angular ui $ modal을 부트하는 3과 함께 사용하는 스타일을 사용합니다.

.modal {
    display: block;
}
.modal-body:before,
.modal-body:after {
    display: table;
    content: " ";
}
.modal-header:before,
.modal-header:after {
    display: table;
    content: " ";
}

(사용자 지정 지시문을 사용하는 경우 마지막 항목이 필요합니다) html을 다음과 같이 캡슐화하십시오.

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

---

대화 상자에 데이터를 전달하여 모달 창 열기

누군가가 대화에 데이터를 전달하는 데 관심이있는 경우 :

app.controller('ModalCtrl', function($scope,  $modal) {

      $scope.name = 'theNameHasBeenPassed';

      $scope.showModal = function() {

        $scope.opts = {
        backdrop: true,
        backdropClick: true,
        dialogFade: false,
        keyboard: true,
        templateUrl : 'modalContent.html',
        controller : ModalInstanceCtrl,
        resolve: {} // empty storage
          };


        $scope.opts.resolve.item = function() {
            return angular.copy(
                                {name: $scope.name}
                          ); // pass name to resolve storage
        }

          var modalInstance = $modal.open($scope.opts);

          modalInstance.result.then(function(){
            //on ok button press 
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
})

var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {

     $scope.item = item;

      $scope.ok = function () {
        $modalInstance.close();
      };

      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
}

도장 Plunker

---

AngularJS Bootstrap 웹 사이트는 최신 문서로 업데이트되지 않습니다. 약 3 개월 전 pkozlowski-opensource가 $ dialog 커밋에서 $ modal을 분리하기위한 변경 사항을 작성했습니다.

https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd

그 커밋에서 그는 $ modal에 대한 새로운 문서를 추가했습니다. 아래에서 찾을 수 있습니다.

https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal/docs/readme.md .

도움이 되었기를 바랍니다!

---

빠르고 더러운 길!

좋은 방법은 아니지만 저에게는 가장 간단 해 보입니다.

모달 데이터 대상 및 데이터 토글을 포함하는 앵커 태그를 추가하고 연관된 ID를 갖습니다. (대부분 html보기의 어느 곳에 나 추가 가능)

<a href="" data-toggle="modal" data-target="#myModal" id="myModalShower"></a>

지금,

각도 컨트롤러 내부에서 모달을 트리거하려는 위치에서

angular.element('#myModalShower').trigger('click');

이것은 각도 코드에 따라 버튼을 클릭하는 것과 유사하며 모달이 나타납니다.

---

Maxim Shoustin에서 제공하는 것과 유사한 다른 버전

나는 대답을 좋아했지만 나를 괴롭히는 부분 <script id="...">은 모달 템플릿의 컨테이너로 사용하는 것입니다 .

모달의 템플릿을 숨김에 배치하고 주로 <div>호출되는 범위 변수로 내부 html을 바인딩하고 싶었습니다. modal_html_template왜냐하면 템플릿의 html을 a <div>대신에 배치하는 것이 더 정확하고 WebStorm / PyCharm에서 처리하는 것이 더 편안하다고 생각하기 때문 입니다.<script id="...">

이 변수는 호출 할 때 사용됩니다. $modal({... 'template': $scope.modal_html_template, ...})

내부 HTML을 바인딩하기 위해 inner-html-bind간단한 지시문을 만들었습니다.

예를 확인 plunker

<div ng-controller="ModalDemoCtrl">

    <div inner-html-bind inner-html="modal_html_template" class="hidden">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </div>

    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>

inner-html-bind 지령:

app.directive('innerHtmlBind', function() {
  return {
    restrict: 'A',
    scope: {
      inner_html: '=innerHtml'
    },
    link: function(scope, element, attrs) {
      scope.inner_html = element.html();
    }
  }
});

참고 URL : https://stackoverflow.com/questions/16265844/invoking-modal-window-in-angularjs-bootstrap-ui-using-javascript