古风名字,欢乐颂第一季,好看的电视剧

AngularJS中使用ngModal模態(tài)框?qū)嵗?/h1>

2019-11-19 16:28:20

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

在AngularJS中使用模態(tài)框需要引用的文件：

angular.js 1.5.5
ui.bootstrap-tpls.js 0.11.2
bootstrap.css 3.3.7

需要注意版本要一致，高版本的不支持這種方法，會(huì)出錯(cuò)

將需要彈出的模態(tài)框的內(nèi)容寫在 script 標(biāo)簽中，指明屬性，放在頁(yè)面中

<script type="text/ng-template" id="modal.html"> <div>  <div class="modal-header">    <h3 class="modal-title" align="center">      標(biāo)題信息    </h3>  </div>  <div class="modal-body">    <div align="center">      模態(tài)框內(nèi)容    </div>  </div>  <div class="modal-footer">    <button class="btn btn-primary" ng-click="ok()">      確認(rèn)    </button>    <button class="btn btn-warning" ng-click="cancel()">      退出    </button>  </div></div></script>

在App和Controller中注入模態(tài)框

var app = angular.module('app', ['ui.bootstrap']);app.controller('modalController', function($scope, $rootScope,$modal) {  $scope.openModel = function() {      var modalInstance = $modal.open({        templateUrl : 'modal.html',//script標(biāo)簽中定義的id        controller : 'modalCtrl',//modal對(duì)應(yīng)的Controller        resolve : {          data : function() {//data作為modal的controller傳入的參數(shù)             return data;//用于傳遞數(shù)據(jù)          }        }      })    }}//模態(tài)框?qū)?yīng)的Controllerapp.controller('modalCtrl', function($scope, $modalInstance, data) {  $scope.data= data;  //在這里處理要進(jìn)行的操作    $scope.ok = function() {    $modalInstance.close();  };  $scope.cancel = function() {    $modalInstance.dismiss('cancel');  }});

添加事件觸發(fā)顯示模態(tài)框

<button ng-click="openModal()">打開模態(tài)框</button>

html

<!DOCTYPE html><html ng-app="app" ng-controller="modalController"><head>  <title>ng-model模態(tài)框</title></head><link  rel="external nofollow" rel="stylesheet"><body><button ng-click="openModal()">打開模態(tài)框</button><script type="text/ng-template" id="modal.html">   <div>    <div class="modal-header">      <h3 class="modal-title" align="center">        標(biāo)題信息      </h3>    </div>    <div class="modal-body">      <div align="center">        模態(tài)框內(nèi)容 <br>        {{data}}      </div>    </div>    <div class="modal-footer">      <button class="btn btn-primary" ng-click="ok()">        確認(rèn)      </button>      <button class="btn btn-warning" ng-click="cancel()">        退出      </button>    </div>  </div></script><script src="https://cdn.bootcss.com/angular.js/1.5.5/angular.min.js"></script><script src="https://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script><script type="text/javascript">  var app = angular.module('app', ['ui.bootstrap']);  app.controller('modalController', function($scope, $rootScope, $modal) {    var data = "通過(guò)modal傳遞的數(shù)據(jù)";    $scope.openModal = function() {        var modalInstance = $modal.open({          templateUrl : 'modal.html',//script標(biāo)簽中定義的id          controller : 'modalCtrl',//modal對(duì)應(yīng)的Controller          resolve : {            data : function() {//data作為modal的controller傳入的參數(shù)               return data;//用于傳遞數(shù)據(jù)            }          }        })      }  })   //模態(tài)框?qū)?yīng)的Controller   app.controller('modalCtrl', function($scope, $modalInstance, data) {     $scope.data= data;     //在這里處理要進(jìn)行的操作     $scope.ok = function() {       $modalInstance.close();     };     $scope.cancel = function() {       $modalInstance.dismiss('cancel');     }  });</script></body></html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。

上一篇：angular使用post、get向后臺(tái)傳參的問(wèn)題實(shí)例

下一篇：angularJS模態(tài)框$modal實(shí)例代碼