Angular에서 모달 창을 호출하는 중JavaScript를 사용하는 JS 부트스트랩 UI

Angular에서 모달 창을 호출하는 중JavaScript를 사용하는 JS 부트스트랩 UI

여기서 설명한 예를 사용하여 버튼을 클릭하지 않고 JavaScript를 사용하여 모달 창을 호출하려면 어떻게 해야 합니까?

Angular는 처음입니다.JS가 서류를 이리저리 뒤져봤지만 잘 되지 않았다.

감사해요.

우선 http://angular-ui.github.io/bootstrap/에는<modal>디렉티브와$dialog이 두 가지를 모두 사용하여 모달 창을 열 수 있습니다.

다른 점은 다음과 같습니다.<modal>모달의 디렉티브콘텐츠는 호스트템플릿(모달창 열기를 트리거하는 템플릿)에 포함되어 있습니다.그$dialog서비스는 훨씬 유연하며 별도의 파일에서 모달의 콘텐츠를 로드할 수 있으며 Angular의 임의의 위치에서 모달 창을 트리거할 수 있습니다.JS 코드(컨트롤러, 서비스 또는 다른 디렉티브).

"JavaScript 코드 사용"이 정확히 무엇을 의미하는지 확실하지 않지만, Angular의 임의의 위치를 의미한다고 가정합니다.JS 코드$dialog서비스가 아마 좋은 방법일 겁니다.

매우 사용하기 쉽고, 가장 간단한 형태로 다음과 같이 쓸 수 있습니다.

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

여기에서 실제로 어떤 JavaScript 코드에 의해서도 트리거 될 수 있는 것은 컨트롤러가 인스턴스화된 후 3초 후에 타이머로 모달(modal)을 트리거하는 버전입니다.

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

이는 http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview의 plunk에서 확인할 수 있습니다.

마지막으로, 여기에서는, 다음의 모든 레퍼런스·메뉴얼을 참조해 주세요.$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');
      };
}

데모

앵귤러JS 부트스트랩 웹 사이트가 최신 문서로 업데이트되지 않았습니다.pkozlowski-opensource는 약 3개월 전에 $dialog commit에서 $modal을 분리하는 변경을 작성했습니다.

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

이 커밋에서 그는 $modal에 대한 새로운 문서를 추가했습니다.이 문서는 다음과 같습니다.

https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal/docs/readme.md 를 참조해 주세요.

이게 도움이 됐으면 좋겠네요!

빠르고 더러운 방법!

좋은 방법은 아니지만 내게는 가장 간단한 방법인 것 같다.

modal data-target 및 data-toggle을 포함하는 앵커태그를 추가합니다(대부분 html 뷰에서 추가 가능).

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

지금이다,

각도 컨트롤러 내부, 모달 트리거 위치에서만 사용

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

그러면 각도 코드를 기준으로 버튼을 클릭하는 것처럼 보이고 모달(modal)이 나타납니다.

Maxim Shoustin이 제공하는 버전과 유사한 버전

나는 그 대답이 마음에 들었지만 신경이 쓰였던 부분은 그 사용법이었다.<script id="...">이치노

싶었다.<div>을 "html" 스코프라는 .modal_html_template을 html/PyCharm에더WebStorm이 더 입니다).<div><script id="...">

는 콜할 때 됩니다.$modal({... 'template': $scope.modal_html_template, ...})

html을 "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