使用AngularJS切換Twitter Bootstrap（3.x）模式

我一直在試圖讓Bootstrap模型在加載時隱藏，然後在單擊按鈕後顯示它，但迄今爲止一直未成功。對於AngularJS我很新，所以如果我沒有正確地做到這一點，請耐心等待。下面是我到目前爲止有：使用AngularJS切換Twitter Bootstrap（3.x）模式

模態角指令（modal.js）：

angular.module('my.modal', ['modal.html']) 
.directive('myModal', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: false, 
     templateUrl: 'modal.html', 
     link: function(scope, element, attrs) { 
      element.modal('hide') 
      scope.toggleModal = function() { 
       if (attrs.showModal === true) { 
        element.modal('hide') 
        attrs.showModal = false 
       } else { 
        element.modal('show') 
        attrs.showModal = true 
       } 
      } 
     } 
    }; 
});

莫代爾模板（modal.html）：

<div id="{{id}}" showModal="false" tabindex="-1"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h3 class="modal-title">I'm a modal!</h3> 
      </div> 
      <div class="modal-body"> 
       <div class="content" ng-transclude></div> 
      </div> 
      <div class="modal-footer"> 
      <button class="btn btn-primary" ng-click="showModal = false">Cancel</button> 
      </div> 
     </div> 
    </div> 
</div>

最後，按鈕切換模式（的index.html）：

... 
<my-modal> 
    <p>Some content</p> 
</my-modal> 
<button class="btn btn-default" type="button" ng-click="toggleModal()">Toggle me!</button> 
...

所有這樣做是顯示在頁面加載模式（我的頭和所有的行吟詩人之間r內容，所以它不會浮在任何東西之上）並且切換按鈕不起作用。

來源

2015-02-09 tugayac

如果您可以使用另一個庫，我建議您查看[UI Bootstrap]（http://angular-ui.github.io/bootstrap/）。它爲您提供Bootstrap指令和服務。 – 2015-02-09 22:08:07

showModal是不變的，永遠不會改變。嘗試使用'ng-show =「showModal」'。 – h7r 2015-02-09 22:13:40

我想過使用UI Bootstrap，但後來我想不出做一個跨越式的方法。對此有何想法？ – tugayac 2015-02-10 03:46:52

我已經成功地得到它的工作通過引導3模態特性和動態變化的基礎上它的造型和模態指令類的顯示或隱藏狀態，雖然沒有動畫：

莫代爾角指令（modal.js）：

angular.module('my.modal', ['modal.html']) 
.directive('myModal', [function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: false, 
     templateUrl: 'modal.html', 
     controller: 'ModalCtrl', 
     link: function(scope, element, attrs) { 
      if (attrs.title === undefined) { 
       scope.title = 'Modal Title Placeholder'; 
      } else { 
       scope.title = attrs.title; 
      } 

      scope.$watch('showModal', function (value) { 
       if (value) { 
        scope.displayStyle = 'block'; 
        scope.modalFadeIn = 'in'; 
       } else { 
        scope.displayStyle = 'none'; 
        scope.modalFadeIn = ''; 
       } 
      }); 
     } 
    }; 
}).controller('ModalCtrl', ['$scope', function ($scope) { 
    $scope.toggleModal = function() { 
     $scope.showModal = !$scope.showModal; 
    }; 

    $scope.$open = function() { 
     $scope.showModal = true; 
    }; 

    $scope.$close = function() { 
     $scope.showModal = false; 
    }; 
});

莫代爾模板（modal.html）：

<div role="dialog" tabindex="-1" class="modal fade" ng-init="showModal = false" ng-show="showModal" ng-style="{display: displayStyle}" ng-class="modalFadeIn"> 
    <div class="modal-backdrop fade in" style="height: 100%"> </div> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h3 class="modal-title">{{title}}</h3> 
      </div> 
      <div class="modal-body"> 
       <div class="content" ng-transclude></div> 
      </div> 
     </div> 
    </div> 
</div>

打開模式的調用可以使用open或toggleModal函數完成。自定義按鈕需要放置在模式中才能關閉模式。

來源

2015-02-11 17:40:05 tugayac

使用AngularJS切換Twitter Bootstrap（3.x）模式

回答

相關問題