앵귤러 컨트롤러로부터의 트위터 부트스트랩모달 닫기

앵귤러 컨트롤러로부터의 트위터 부트스트랩모달 닫기

사용자에게 양식을 표시하는 데 사용하는 모달 창이 있습니다.정보를 입력하고 ng클릭이 있는 버튼을 누릅니다.서버는 요청을 처리하고 응답을 반환합니다.응답이 성공하면 컨트롤러에서 모달창을 닫습니다어떻게 하면 좋을까요?

모달은 다른 페이지에 포함된 일부입니다.

메인 페이지:

<!-- main content -->
<p>Foo</p>
<!-- angular directive -->
<foo-directive></foo-directive>

이 지시의 내용:

<div ng-controller="FooCtrl">
    <ul class="thumbnails">
        <li class="span3 tile tile-white" ng-repeat="foo in model.foo">
            <div>
                {{foo.bar}}
            </div>
            <div>
                ({{foo.bam}})
            </div>
            <div>
                <a data-toggle="modal" href="#myModal"><img src="{{foo.imgPath}}"></a>
            </div>
        </li>
    </ul>
    <!-- foo modal partial included by ejs -->
    <% include foo_modal.ejs %>
</div>

모달 마크업:

<div id="fooModal" class="modal hide fade in" style="display: none; ">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>New Device</h3>
    </div>
    <div class="modal-body">
        <h4>Foo Modal</h4>
        <div ng-controller="FooCtrl">
            <form name="fooFrm">
                <input id="email" type="email" class="input-medium" ng-model="fooEmail"
                       placeholder="Email">
                <button class="btn btn-primary btn-small"
                        ng-click="doFoo({email:fooEmail})">Email Link</button>
            </form>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
    </div>
</div>

컨트롤러 코드:

functionFooCtrl($scope, FooService) {
    

    $scope.doFoo= function (email) {
       FooService.save({email:email.fooEmail}) {
            alert('Request successful');
            //TODO close Twitter bootstrap modal named fooModal here
        },
            function (err) {
                alert('Your request bonked, sorry');
                //TODO close twitter bootstrap modal named fooModal here
            });
        }
    };

성공 및 오류 기능에서 컨트롤러에서 모드를 닫는 올바른 방법은 무엇입니까?

각의( angular意)를 사용하지 않아도 같은 효과를 얻을 수 있습니다.이것은 각도 지시어를 사용하여 수행할 수 있습니다.

먼저 명령어를 모달에 추가합니다.

<div class="modal fade" my-modal ....>...</div>

새 각도 지시문을 작성합니다.

app.directive('myModal', function() {
   return {
     restrict: 'A',
     link: function(scope, element, attr) {
       scope.dismiss = function() {
           element.modal('hide');
       };
     }
   } 
});

이제 컨트롤러에서 off() 메서드를 호출합니다.

app.controller('MyCtrl', function($scope, $http) {
    // You can call dismiss() here
    $scope.dismiss();
});

저는 아직 각진 js의 초기 단계입니다.컨트롤러 내부에서 DOM을 조작해서는 안 된다는 것을 알고 있습니다.명령어로 DOM을 조작할 수 있습니다.나는 이것이 똑같이 나쁘다고 확신할 수 없다.더 좋은 대안이 있다면 여기에 붙이겠습니다.

주의할 점은 단순히 뷰에서 ng-hide나 ng-show를 사용하여 모달의 숨김이나 표시를 할 수 없다는 것입니다.그것은 단순히 모달의 배경이 아니라 모달의 배경을 감춘다.modal() instance 메서드를 호출하여 modal을 완전히 삭제해야 합니다.

다음과 같이 할 수 있습니다.

angular.element('#modal').modal('hide');

각진 의 부트스트랩을 살펴봤어?Dialog (ui.bootstrap.dialog) 디렉티브가 잘 동작합니다.(예에 따라) 콜백 중에 대화상자를 닫을 수 있습니다.

$scope.close = function(result){
  dialog.close(result);
};

업데이트:

그 후 디렉티브는 Modal로 이름이 변경되었습니다.

이것은 Bootstrap 모드를 숨기고 표시하는 재사용 가능한 Angular 지시문입니다.

app.directive("modalShow", function () {
    return {
        restrict: "A",
        scope: {
            modalVisible: "="
        },
        link: function (scope, element, attrs) {

            //Hide or show the modal
            scope.showModal = function (visible) {
                if (visible)
                {
                    element.modal("show");
                }
                else
                {
                    element.modal("hide");
                }
            }

            //Check to see if the modal-visible attribute exists
            if (!attrs.modalVisible)
            {

                //The attribute isn't defined, show the modal by default
                scope.showModal(true);

            }
            else
            {

                //Watch for changes to the modal-visible attribute
                scope.$watch("modalVisible", function (newValue, oldValue) {
                    scope.showModal(newValue);
                });

                //Update the visible value when the dialog is closed through UI actions (Ok, cancel, etc.)
                element.bind("hide.bs.modal", function () {
                    scope.modalVisible = false;
                    if (!scope.$$phase && !scope.$root.$$phase)
                        scope.$apply();
                });

            }

        }
    };

});

사용 예 1 - 이것은 모달 표시를 전제로 하고 있습니다.ng-if 를 조건으로 추가할 수 있습니다.

<div modal-show class="modal fade"> ...bootstrap modal... </div>

사용 예 #2 - 모달 표시 속성에 Angular 식을 사용합니다.

<div modal-show modal-visible="showDialog" class="modal fade"> ...bootstrap modal... </div>

다른 예 - 컨트롤러의 상호작용을 시연하려면 컨트롤러에 이와 같은 것을 추가하면 2초 후에 모달(modal)이 표시되고 5초 후에 숨길 수 있습니다.

$scope.showDialog = false;
$timeout(function () { $scope.showDialog = true; }, 2000)
$timeout(function () { $scope.showDialog = false; }, 5000)

이 질문에 답하는 것이 늦었습니다.다른 질문을 위해 이 지시문을 작성했습니다.부트스트랩모달의 심플 앵귤러 디렉티브

이게 도움이 됐으면 좋겠다.

angularjs 함수를 호출하는 버튼 속성에 data-timeout="modal"을 추가할 수 있습니다.

예를 들어 다음과 같습니다.

<button type="button" class="btn btn-default" data-dismiss="modal">Send Form</button>

@isubuz에 의한 응답과 속성 명령에 관한 @Umur Kontaci에 의한 응답을 컨트롤러가 "dismiss"와 같은 DOM과 같은 작업을 호출하지 않고 보다 MVVM 스타일이 되어 부울 속성을 설정하는 버전으로 리믹스했습니다.isInEditMode뷰는 이 비트의 정보를 부트스트랩모달의 개폐를 실시하는 속성 디렉티브에 링크합니다.

var app = angular.module('myApp', []);

app.directive('myModal', function() {
   return {
     restrict: 'A',
     scope: { myModalIsOpen: '=' },
     link: function(scope, element, attr) {
       scope.$watch(
         function() { return scope.myModalIsOpen; },
         function() { element.modal(scope.myModalIsOpen ? 'show' : 'hide'); }
       );
     }
   } 
});

app.controller('MyCtrl', function($scope) {
  $scope.isInEditMode = false;
  $scope.toggleEditMode = function() { 
    $scope.isInEditMode = !$scope.isInEditMode;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>

<div ng-app="myApp" ng-controller="MyCtrl as vm">

<div class="modal fade" my-modal my-modal-is-open="isInEditMode">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        Modal body! IsInEditMode == {{isInEditMode}}
      </div>
      <div class="modal-footer">
        <button class="btn" ng-click="toggleEditMode()">Close</button>
      </div>
    </div>
  </div>
</div>

<p><button class="btn" ng-click="toggleEditMode()">Toggle Edit Mode</button></p> 
<pre>isInEditMode == {{isInEditMode}}</pre>
  
</div>

**just fire bootstrap modal close button click event**
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope,$http){
  $('#btnClose').click();// this is bootstrap modal close button id that fire click event
})

--------------------------------------------------------------------------------

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

btnClose를 설정할 때 modal 'close button' id를 설정하기만 하면 됩니다.모달의 각도에서의 닫힘을 위해서는 $('#btnClose'')와 같이 닫힘 버튼을 클릭하는 이벤트를 실행해야 합니다.클릭()

간단한 jquery 코드로 할 수 있습니다.

$('#Mymodal').modal('hide');

언급URL : https://stackoverflow.com/questions/15399958/closing-twitter-bootstrap-modal-from-angular-controller