2

我有一個引導模式彈出窗口,我填充我的模態控制器的數據。填充數據後,我想顯示它。爲了能夠在進入頁面時立即顯示modalpopup,我想直接觸發它。現在我有一個按鈕可以做到這一點,但我怎樣才能以適當的方式自動執行?從控制器觸發模式彈出

<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog" ng-init="getAllItems()"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
       <div class=""> 
        <form class="form-horizontal" name="form" role="form"> 
         <div ng-repeat="item in items"> 
          <input type="radio" name="fundselector" ng-model="item" ng-value="item"/> {{item}} <br /> 
         </div> 
        </form> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

我的控制器:

angular.module("Modal") 
.controller("ModalController", 
[ 
"$scope", "$rootScope", "$location", "ModalService", "AuthenticationService", 
function ($scope, $rootScope, $location, ModalService, AuthenticationService) { 

    AuthenticationService.GetCurrentWindowsUser(function(username) { 
     $scope.username = username; 
    }); 

    $scope.getAllItems = function() { 
     AuthenticationService.GetCurrentWindowsUser(function (username) { 
      if (username) { 
       AuthenticationService.GetItems(username, function (items) { 
        $scope.items = items; 
        //Trigger modalpopup here 
       }); 
      } 
     }); 
    } 
} 
]); 
+1

你試過** $('#myModal')。modal('show')** – Vivek

+1

想用angular代替jquery – MrProgram

+0

@Vivek你的答案是最好的隊友!謝謝 :) –

回答

3

不要使用jquery,請使用angular-ui。

https://angular-ui.github.io/bootstrap/#/modal

您可以編程方式打開模式如下圖所示,並在決心通過您的數據。這是從他們的例子中直接複製和粘貼的。

var modalInstance = $uibModal.open({ 
     animation: $scope.animationsEnabled, 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     size: size, 
     resolve: { 
     items: function() { 
      return $scope.items; 
     } 
     } 
    }); 
1

嘗試是這樣的 -

$( '#yourModalId')模態( '秀');

0

要解決你的榜樣,我創建了一個會打開模式,並將其連接到外部控制器和模態控制器的服務。我不得不從模態中刪除「模態」類,因爲它有一個display:none屬性。 Here是一個小提琴,顯示我做了什麼。不過,@ mgiesa的回答更好。