Chỉ thị góc đơn giản cho Bootstrap Modal

Question

Bất cứ ai cũng có một chỉ thị đơn giản để tự động hiển thị một phương thức Bootstrap? Trong Bootstrap 3 họ đã lấy đi khả năng tự động hiển thị các phương thức vì vậy tôi không thể sử dụng một góc ng-if show block. Bất kỳ sự trợ giúp nào đều sẽ là tuyệt vời.

Answer 1

Cập nhật cho góc 1.2 & Bootstrap 3.1.1: http://embed.plnkr.co/WJBp7A6M3RB1MLERDXSS/

tôi mở rộng câu trả lời Ender2050 của để chỉ thị không có một phạm vi cô lập. Điều này có nghĩa là nội dung phương thức có thể chứa tham chiếu đến đối tượng phạm vi. Cũng sử dụng lại thuộc tính chỉ thị để chỉ cần một thuộc tính.

app.directive("modalShow", function ($parse) { 
    return { 
     restrict: "A", 
     link: function (scope, element, attrs) { 

      //Hide or show the modal 
      scope.showModal = function (visible, elem) { 
       if (!elem) 
        elem = element; 

       if (visible) 
        $(elem).modal("show");      
       else 
        $(elem).modal("hide"); 
      } 

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

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

    }; 
}); 

Cách sử dụng:

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

Answer 2

Dưới đây là hướng dẫn Góc sẽ ẩn và hiển thị phương thức Bootstrap.

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(); 
       }); 

      } 

     } 
    }; 

}); 

Cách sử dụng Ví dụ # 1 - điều này giả định bạn muốn hiển thị các phương thức - bạn có thể thêm ng-nếu như một điều kiện

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

Cách sử dụng Ví dụ # 2 - này sử dụng một biểu thức kiễu góc trong phương thức thuộc tính -visible

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

Một ví dụ khác - để giới thiệu sự tương tác điều khiển, bạn có thể thêm một cái gì đó như thế này để điều khiển của bạn và nó sẽ hiển thị các phương thức sau 2 giây và sau đó giấu nó sau 5 Secon ds.

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

Tôi rất lo lắng khi xem những giải pháp khác mà mọi người đưa ra. Chúc mừng!