Bootstrap+angularjs dialog Box Instance

<script type= "Text/javascript" src= "/assets/js/plugins/jquery.min.js" ></script><script type= "text/ JavaScript "src="/assets/js/plugins/jquery-migrate.min.js "></script><script type=" Text/javascript " Src= "/assets/js/angularjs/angular.js" ></script><script type= "Text/javascript" src= "/assets/JS/ Angularjs/i18n/angular-locale_zh.js "></script><!--angularjs+bootstrap--><script src="/assets/ Js/plugins/angularjs/plugins/ui-bootstrap-tpls.min.js "></script>

1. Add jquery and angular references

2, add ui-bootstrap-tpls.min.js, this is bootstrap to ANGULARJS package

3. Writing a dialog box template

<script type= "Text/ng-template" id= "service.html" > <div class= "portlet box Blue" > <di V class= "Portlet-title" > <div class= "caption" > <i class= "fa fa-gift" ><                /i> service Agreement </div> </div> <div class= "Portlet-body" > <div class= "Scroll-body" slimscroll= "{height:500}" style= ' height:500px; ' > <strong style= ' text-align:center ' > service agreement </strong><br/> </div&gt                ; <ul class= "Pager" > <li class= "Previous" > <a href= "javascript:;" C lass= "Btn Blue" ng-click= ' Refuse () ' > <i class= "fa fa-angle-left" ></i> reject </a&                    Gt </li> <li class= "Next" > <a href= "javascript:;" class= "Btn Blue" n G-click= ' Agree () ' > Agree <i class= "FA fa-angle-right" ></i> </a> </li> & lt;/ul> </div> </div> </script>

5, add Ng-click event, such as: <a href= "javascript:;" ng-click= "Opendlg (' LG ')" > "Service Agreement" </a>

6, of course, do not forget this: var app = Angular.module (' Appmain ', [' ui.bootstrap ']);

7. Handle the Click event of the Open dialog box in the controller

$scope. Opendlg=function (size) {var size=size| | '; /size is a window-sized parameter that can take LG,SM, the default value blank, to control the window size var modalinstance = $modal. Open ({Templateurl                    : ' service.html ',//template URL controller: ' Ctrldlgservice ',//Controller size:size,//default window size  Resolve: {//Parameter pass Agree:function () {return [true],                 FALSE]}});  ModalInstance.opened.then (function () {Console.log (' modal is opened ');                  function executed after the modal window is opened});                    ModalInstance.result.then (Result) {$scope. selected = result;//The return value when the window is clicked off                  Console.log (' Result: ' +result);                      }, function (reason) {console.log (reason);//click on an empty area, always output backdrop Click, click Cancel, it will trigger cancel $log. info (' Modal dismissed at: ' + new Date ());             }); }

8. dialog box Controller

App.controller (' Ctrldlgservice ', function ($scope, $http, $modal, Growl, $modalInstance, Agree) {            $scope. Items = agree;//gets the parameter            //Deny event            $scope. Refuse = function () {                console.log (' refuse ');                $modalInstance. Close (false);            };            Agree to the event            $scope. Agree = function () {                console.log (' Agree ');                $modalInstance. Close (True);            };            Exit event            $scope. Cancel = function () {                $modalInstance. Dismiss (' Cancel ');            }        })

9. Finish the work.

Bootstrap+angularjs dialog Box Instance