如何使用angularjs引导模态窗口？

我想使用引导弹出窗口的一些用户确认，但我最初被困在这里通过使用引导与angularjs，任何想法什么是实施错误下面有引导模态窗口或任何更好的方法来使用引导模态窗口与angularjs？我在控制台中看不到任何错误。如何使用angularjs引导模态窗口？

app.js

angular.module('App', [ 
    'ui.router', 
    'ui.bootstrap']).config(function ($stateProvider, $httpProvider, $urlRouterProvider) { 

//config code here .. 
});

ctrl.js

angular.module('App').controller('modalController',function($scope,$uibModal){ 
    $scope.openModal = function() { 
      console.log('opening pop up'); 
      var modalInstance = $uibModal.open({ 
       templateUrl: 'web/global/modal.html', 
      }); 
     } 
});

home.html做为

<button class="btn btn-warning" ng-click="openModal()">Simple Popup</button>

来源

2016-07-25 hussain

是路径到您的模板正确的：''网络/国际/ modal.html''？ –

ANGULAR UI BOOTSTRAP :

工作例：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $modal, $log) { 
 

 
    $scope.items = ['item1', 'item2', 'item3']; 
 

 
    $scope.animationsEnabled = true; 
 

 
    $scope.open = function(size) { 
 

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

 
    modalInstance.result.then(function(selectedItem) { 
 
     $scope.selected = selectedItem; 
 
    }, function() { 
 
     $log.info('Modal dismissed at: ' + new Date()); 
 
    }); 
 
    }; 
 

 
    $scope.toggleAnimation = function() { 
 
    $scope.animationsEnabled = !$scope.animationsEnabled; 
 
    }; 
 

 
}); 
 

 
// Please note that $modalInstance represents a modal window (instance) dependency. 
 
// It is not the same as the $modal service used above. 
 

 
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $modalInstance, items) { 
 

 
    $scope.items = items; 
 
    $scope.selected = { 
 
    item: $scope.items[0] 
 
    }; 
 

 
    $scope.ok = function() { 
 
    $modalInstance.close($scope.selected.item); 
 
    }; 
 

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

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="ModalDemoCtrl"> 
 
    <script type="text/ng-template" id="myModalContent.html"> 
 
     <div class="modal-header"> 
 
     <h3 class="modal-title">I'm a modal!</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <ul> 
 
      <li ng-repeat="item in items"> 
 
      <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a> 
 
      </li> 
 
     </ul> 
 
     Selected: <b>{{ selected.item }}</b> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
 
     <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
 
     </div> 
 
    </script> 
 

 
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 
 
    <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button> 
 
    <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button> 
 
    <button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button> 
 
    <div ng-show="selected">Selection from a modal: {{ selected }}</div> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2016-07-25 19:06:04 Iceman

感谢您的参考，它为我工作。 – hussain

如何使用angularjs引导模态窗口？

回答

相关问题