ブートストラップモードのための単純な角度指令

Question

ブートストラップモードを自動的に表示するという簡単な指示がありますか？ Bootstrap 3では、彼らはモーダルを自動的に表示する能力を失ったので、ng-ifのショーブロックを使用することはできません。どんな助けも素晴らしいだろう。

Answer 1

は角1.2 &ブートストラップ3.1.1のための更新：http://embed.plnkr.co/WJBp7A6M3RB1MLERDXSS/

ディレクティブは孤立スコープを持っていないので、私はEnder2050の答えを拡張しました。つまり、モーダルコンテンツにスコープオブジェクトへの参照を含めることができます。また、ディレクティブ属性を再利用して、1つの属性だけが必要となります。

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ディレクティブがあります。

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 - これはあなたがモーダルを表示したいと仮定し - これはモーダルで角度の式を使用しています - あなたは条件

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

使用例＃2としてNG-IFを追加することができます-visible属性

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

他の例 - コントローラとの対話をデモするために、あなたはあなたのコントローラにこのような何かを追加することができ、それが2秒後にモーダルを表示し、5 secon後にそれを隠しますds。

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

私が他の解決方法を思いつくのは心配です。乾杯！