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>   -->

 

转载于:https://www.cnblogs.com/beimingbingpo/p/6867272.html