角模態模板不顯示

Question

我對Angular有點新鮮。我嘗試在檢測到無效的用戶角色時顯示Bootstap 3模式對話框。我無法讓我的模態模板顯示。行爲似乎工作，即我可以駁回褪色覆蓋..我只是沒有看到實際的模板模板。

引導3個 AngularJS 1.0.7 AngularJS UI引導0.6.0

控制器

gsApp.controller('MainController', ['$rootScope', '$scope', '$q', '$window', '$location',  '$modal', 'ApplicationCache', 'UserService', 
function MainController($rootScope, $scope, $q, $window, $location, $modal, ApplicationCache, UserService) { 

    $scope.userRole = "BadRole"; 

    $scope.showBadRoleModel = function() { 
     var showBadRoleModelInstance = $modal.open({ 
      templateUrl: "badRoleModal.html", 
      backdrop: true, 
      windowClass: 'modal', 
      controller: badRoleModalInstance, 
      resolve: { 
       items: function() { 
        return $scope.userRole; 
       } 
      } 
     }); 
    } 

    var badRoleModalInstance = function($scope, $modalInstance, items){ 
     $scope.ok = function() { 
      $modalInstance.close(); 
     }; 

     $scope.cancel = function() { 
      $modalInstance.dismiss('cancel'); 
     }; 
    } 
}]); 

HTML

<div class="row" ng-controller="MainController"> 

      <script type="text/ng-template" id="badRoleModal.html"> 
       <div class="modal-header"> 
        <h3>I'm a modal!</h3> 
       </div> 
       <div class="modal-body"> 
        <h2>body</h2> 
       </div> 
       <div class="modal-footer"> 
        <button class="btn btn-primary" ng-click="ok()">OK</button> 
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
       </div> 
      </script> 

      <button class="btn" ng-click="showBadRoleModel()">Show bad role modal</button> 
     </div> 

Answer 1

AngularJs UI引導不工作Bootstrap 3呢。

看到更多細節在這裏：https://github.com/angular-ui/bootstrap/issues/331

Answer 2

這裏有一個可重複使用的角度指令，將隱藏和顯示自舉3（或2.X）模式。

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) 

我遲到了這個問題 - 爲另一個問題創建了這個指令。這裏有一些相關的鏈接：Simple Angular Directive for Bootstrap Modal和https://stackoverflow.com/a/19668616/1009125

希望這會有所幫助。