AngularJs $modal入门
入门例子:
http://www.cnblogs.com/liuhongjin/p/6223410.html
<div ng-controller="ModalDemoCtrl"> <script type="text/ng-template" id="myModalContent.html" > <div class="modal-header"> <h3>I am a modal!</h3> </div> <div class="modal-body"> <ul> <li ng-repeat="(k,v) in items track by $index"> <input type="checkbox" >{{k}}{{v}} </li> </ul> </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="open()">Open me!</button> <button class="btn" ng-click="open2()">Open me!</button> </div> <script> app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log', function($scope,$modal,$log) { $scope.items = { 'item1':true, 'item2':true, 'item3':false }; $scope.open = function() { var modalInstance = $modal.open({ templateUrl : 'tpl/ad/warn.html',//'tpl/ad/detail.html',//'myModalContent.html', controller : ModalInstanceCtrl, scope:scope }); }; var scope = $scope.$new(); scope.data = { msg:"test", header:"header" } scope.header = "header"; scope.msg = "msg"; $scope.open2 = function() { var modalInstance = $modal.open({ templateUrl : 'tpl/ad/warn.html',//'myModalContent.html',//'tpl/ad/detail.html', controller : "C_add_Warn", resolve : { header : function() { return angular.copy("新增"); }, msg : function() { return angular.copy("这是消息"); } } }); }; // var ModalInstanceCtrl = function($scope, $modalInstance) { // $scope.ok = function() { // $modalInstance.close(); // }; // $scope.cancel = function() { // $modalInstance.dismiss(); // }; // }; }]); app.controller('C_add_Warn',function($scope, $modalInstance, header,msg){ $scope.header = header; $scope.msg = msg; $scope.ok = function() { $modalInstance.close(); }; $scope.cancel = function() { $modalInstance.dismiss(); }; }); var ModalInstanceCtrl = function($scope, $modalInstance) { $scope.ok = function() { $modalInstance.close(); }; $scope.cancel = function() { $modalInstance.dismiss(); }; }; // function C_add_Warn($scope, $modalInstance, header,msg) { // $scope.header = header; // $scope.msg = msg; // $scope.ok = function() { // $modalInstance.close(); // }; // $scope.cancel = function() { // $modalInstance.dismiss(); // }; // }; </script> <!-- <div ng-controller="ModalDemoCtrl"> <script type="text/ng-template" id="myModalContent.html" > <div class="modal-header"> <h3>I am 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" ng-click="open()">Open me!</button> </div> <script> <button class="btn" ng-click="open()">Open me!</button> </div> <script> app.controller('ModalDemoCtrl', ['$scope', '$modal', '$log', function($scope,$modal,$log) { $scope.items = [ 'item1', 'item2', 'item3' ]; $scope.open = function() { var modalInstance = $modal.open({ templateUrl : 'tpl/ad/detail.html',//'myModalContent.html', controller : ModalInstanceCtrl, resolve : { items : function() { return $scope.items; } } }); modalInstance.opened.then(function() {// 模态窗口打开之后执行的函数 console.log('modal is opened'); }); modalInstance.result.then(function(result) { console.log("result"+result); }, function(reason) { console.log("reason"+reason);// 点击空白区域,总会输出backdrop // click,点击取消,则会暑促cancel $log.info('Modal dismissed at: ' + new Date()); }); }; var ModalInstanceCtrl = function($scope, $modalInstance, items) { $scope.items = items; $scope.selected = { item : $scope.items[0] }; $scope.ok = function() { $modalInstance.close($scope.selected); }; $scope.cancel = function() { $modalInstance.dismiss('cancel'); }; }; }]); </script> -->