使用Bootstrap UI顯示和隱藏AngularJS對話框

我正在使用AngularJS和Bootstrap的應用程序。我試圖使用Bootstrap UI顯示並隱藏我的控制器中的對話框。出於某種原因，當我嘗試打開對話框時，我只看到一個變黑的屏幕。但是，對話從不出現。使用Bootstrap UI顯示和隱藏AngularJS對話框

My Plunker is here

在這種plunker，你可以看到，我有：

var modalInstance = $modal.open({ 
    templateUrl: 'item-dialog.html', 
    size: 'sm' 
}); 

modalInstance.result.then(
    function (res) { 
    console.log('here'); 
    }, 
    function (err) { 
    $log.info('Modal dismissed at: ' + new Date()); 
    } 
);

它看起來正確的給我。爲什麼只出現黑屏？謝謝！

來源

2014-09-19 user70192

爲了關閉模式，你可以簡單地添加控制器是這樣的：

var modalInstance = $modal.open({ 
    templateUrl: 'item-dialog.html', 
    size: 'sm', 
    controller:function($scope, $modalInstance){ 
     $scope.saveItem=function(){ 
      $modalInstance.close(); 
     }; 
    } 
});

來源

2014-09-19 13:54:07 stetro

Bootstrap UI指令只需要模板的內容作爲模板。你可以簡單地去除包裝標籤，它會顯示爲預期：

<div id="scoopModal" class="modal fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content">...</div></div></div>

var app = angular.module('app', ['ui.bootstrap']); 
 

 
app.service('myService', ['$http', '$q', function($http, $q) { 
 
    this.getOptions = function(prefix) { 
 
\t \t \t return $http.get('http://search.ams.usda.gov/farmersmarkets/v1/data.svc/zipSearch?zip=60629').then(function(response){ 
 
\t \t \t console.log(response.data.results); 
 
     return response.data.results; 
 
     }); 
 
\t \t }; 
 
}]); 
 

 
app.controller('MyController', ['$scope', '$modal', function ($scope, $modal) { 
 
    $scope.query = 'test'; 
 
    
 
    $scope.newItem_Click = function() { 
 
     var modalInstance = $modal.open({ 
 
      templateUrl: 'item-dialog.html', 
 
      size: 'sm' 
 
     }); 
 

 
     modalInstance.result.then(
 
      function (res) { 
 
       console.log('here'); 
 
      }, 
 
      function (err) { 
 
       $log.info('Modal dismissed at: ' + new Date()); 
 
      } 
 
     ); 
 
    }; 
 
    
 
    $scope.saveItem = function() { 
 
     console.log($scope.newItem); 
 
     alert('Need to close dialog here.'); 
 
    }; 
 
}]);

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
    <script data-require="[email protected]" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script> 
 
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    
 

 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="app" ng-controller="MyController"> 
 
    <h1>Hello Plunker!</h1> 
 
    
 
    <button class="btn btn-info" data-toggle="modal" ng-click="newItem_Click()">new item</button> 
 
    <script type="text/ng-template" id="item-dialog.html"> 
 
    
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 
 
      <h4 class="modal-title">New Scoop</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <form role="form"> 
 
       <div class="form-group"> 
 
       <label for="type">Type</label> 
 
       <select id="type" class="form-control" ng-model="newItem.typeId"> 
 
        <option value="-1">Other</option> 
 
        <option value="1">Product</option> 
 
        <option value="2">Service</option> 
 
       </select> 
 
       </div> 
 

 
       <div class="form-group"> 
 
       <label>Text</label> 
 
       <textarea class="form-control" rows="3" ng-model="newItem.data"></textarea> 
 
       </div> 
 
      </form>     
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      <button type="button" class="btn btn-primary" ng-click="saveItem()">Save Scoop</button> 
 
      </div> 
 
    
 
</script> 
 
    
 
    </body> 
 

 
</html>

來源

2014-09-19 12:44:50 stetro

感謝你的分享。但是如何從MyController關閉對話框？當我按照這個例子，當我嘗試注入'$ modalInstance'時，我得到一個模塊加載錯誤。非常感謝你分享你的知識。 – user70192 2014-09-19 13:34:42

使用Bootstrap UI顯示和隱藏AngularJS對話框

回答

相關問題