Bootstrap模態的簡單角度指令

Question

任何人都有一個簡單的指令來自動顯示Bootstrap模態？在Bootstrap 3中，他們拿走了自動顯示模式的功能，所以我不能使用角度ng-if顯示模塊。任何幫助都會很棒。

Answer 1

更新了角1.2 &引導3.1.1：http://embed.plnkr.co/WJBp7A6M3RB1MLERDXSS/

我伸出Ender2050的答案，讓指令沒有一個孤立的範圍。這意味着模態內容可以包含對作用域對象的引用。同樣重用指令屬性，因此只需要一個屬性。

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

    }; 
}); 

用法：

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

Answer 2

這是一個Angular指令，它將隱藏並顯示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(); 
       }); 

      } 

     } 
    }; 

}); 

使用例＃1 - 這是假定要顯示的模態 - 你可以添加NG-如果作爲條件

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

使用例＃2 - 這使用在模態的角度表達 - 可見光屬性

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

另一個例子 - 演示控制器互動，您可以添加這樣的事情到控制器，它會顯示2秒後的模式，然後5塞康後隱藏DS。

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

我很想看看有什麼其他的解決方案。乾杯!