angularjs怎么编写一个公共的弹出层插件
angularjs怎么编写一个公共的弹出层插件
杨魅力浏览 736回答 2
2回答
-
皈依舞
下面是AngularUI上的例子，有几点需要注意的地方不要忘了引用bootstrap.css和ui.bootstrapmodule不要忘了template<html ng-app="ui.bootstrap.demo"><head><script src="angular.js"></script><script src="ui-bootstrap-tpls-0.12.1.min.js"></script><link href="bootstrap/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 ng-click="selected.item = item">{{ item }}</a></li></ul>Selected: <b>{{ selected.item }}</b></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 btn-default" ng-click="open()">Open me!</button><button class="btn btn-default" ng-click="open('lg')">Large modal</button><button class="btn btn-default" ng-click="open('sm')">Small modal</button><div ng-show="selected">Selection from a modal: {{ selected }}</div></div></body><script>angular.module('ui.bootstrap.demo',['ui.bootstrap']).controller('ModalDemoCtrl', function($scope, $modal, $log) {$scope.items = ['item1', 'item2', 'item3'];$scope.open = function(size) {var modalInstance = $modal.open({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());});};}).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');};});</script></html>
随时随地看视频慕课网APP
相关分类
AngularJS