AngularJS進階(六)AngularJS+BootStrap實現彈出對話方塊
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!
AngularJS+BootStrap實現彈出對話方塊
參考資料:http://angular-ui.github.io/bootstrap/#/modal
https://www.zybuluo.com/bornkiller/note/6023
http://www.html5jq.com/fe/angular_node/20141127/13.html
若想要實現對話方塊彈出效果,可以使用angular的$modal服務。Github上的解釋如下:
$modal is a service to quickly create AngularJS-powered modal windows. Creating custom modals is straightforward: create a partial view, its controller and reference them when using the service.
The $modal service has only one method: open(options) where available options are like follows:
templateUrl - a path to a template representing modal's content
template - inline template representing the modal's content
scope - a scope instance to be used for the modal's content (actually the $modal service is going to create a child scope of a provided scope). Defaults to $rootScope
controller - a controller for a modal instance - it can initialize scope used by modal. Accepts the "controller-as" syntax in the form 'SomeCtrl as myctrl'; can be injected with $modalInstance
controllerAs - an alternative to the controller-as syntax, matching the API of directive definitions. Requires the controller option to be provided as well
bindToController - when used with controllerAs & set to true, it will bind the $scope properties onto the controller directly
resolve - members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property for AngularJS routes
animation - set to false to disable animations on new modal/backdrop. Does not toggle animations for modals/backdrops that are already displayed.
backdrop - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), 'static' - backdrop is
present but modal window is not closed when clicking outside of the modal window.
keyboard - indicates whether the dialog should be closable by hitting the ESC key, defaults to true
backdropClass - additional CSS class(es) to be added to a modal backdrop template
windowClass - additional CSS class(es) to be added to a modal window template
windowTemplateUrl - a path to a template overriding modal's window template
size - optional suffix of modal window class. The value used is appended to the modal- class, i.e. a value of sm gives modal-sm
openedClass - class added to the body element when the modal is opened. Defaults to modal-open
Global defaults may be set for $modal via $modalProvider.options.
The open method returns a modal instance, an object with the following properties:
close(result) - a method that can be used to close a modal, passing a result
dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
result - a promise that is resolved when a modal is closed and rejected when a modal is dismissed
opened - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables
rendered - a promise that is resolved when a modal is rendered.
In addition the scope associated with modal's content is augmented with 2 methods:
$close(result)
$dismiss(reason)
Those methods make it easy to close a modal window without a need to create a dedicated controller.
If the $scope is destroyed via unexpected mechanism, such as it being passed in the modal options and a $route/$state transition occurs,
the modal will be dismissed with the value $uibUnscheduledDestruction.
Finally, a modal.closing event is broadcast to the modal scope before the modal closes. If the listener calls preventDefault on the event,
then the modal will remain open. The $close and $dismiss methods return true if the event was allowed.
The event itself includes a parameter for the result/reason and a boolean parameter that indicates whether the modal is being closed (true) or dismissed.
譯文如下:
$modal是一個可以迅速建立模態視窗的服務,建立部分頁,控制器,並關聯他們。
$modal僅有一個方法open(options),可以使用的選項如下:
templateUrl:模態視窗的地址
template:用於顯示html標籤
scope:一個作用域為模態的內容使用(事實上,$modal會建立一個當前作用域的子作用域)預設為$rootScope
controller:為$modal指定的控制器,初始化$scope,該控制器可用$modalInstance注入
resolve:定義一個成員並將他傳遞給$modal指定的控制器,相當於routes的一個reslove屬性,如果需要傳遞一個objec物件,需要使用angular.copy()
backdrop:控制背景,允許的值:true(預設),false(無背景),“static” - 背景是存在的,但點選模態視窗之外時,模態視窗不關閉
keyboard:當按下Esc時,模態對話方塊是否關閉,預設為ture
windowClass:指定一個class並被新增到模態視窗中
open方法返回一個模態例項,該例項有如下屬性
close(result):關閉模態視窗並傳遞一個結果
dismiss(reason):撤銷模態方法並傳遞一個原因
result:一個契約,當模態視窗被關閉或撤銷時傳遞
opened:一個契約,當模態視窗開啟並且載入完內容時傳遞的變數
另外,$modalInstance擴充套件了兩個方法$close(result)、$dismiss(reason),這些方法很容易關閉視窗並且不需要額外的控制器
實戰:
在app.js中需要加入依賴ui.bootstrap,需要在index.html中引入ui-bootstrap-tpls-0.7.0.js。
以下為html程式碼:
<div ng-controller="ModalDemoCtrl">
<span style="white-space:pre"> </span><script type="text/ng-template" id="myModalContent.html">
<span style="white-space:pre"> </span><div class="modal-header">
<span style="white-space:pre"> </span><h3 class="modal-title">I'm a modal!</h3>
<span style="white-space:pre"> </span></div>
<span style="white-space:pre"> </span><div class="modal-body">
<span style="white-space:pre"> </span><ul>
<span style="white-space:pre"> </span> <li ng-repeat="item in items">
<span style="white-space:pre"> </span> <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div></div> angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
以下為JS程式碼:
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem; },
function () {
$log.info('Modal dismissed at: ' + new Date()); }); };
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled; }; });
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').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');
};});
出現如下錯誤:
Modal dismissed at: Mon Sep 14 2015 18:53:33 GMT+0800 (中國標準時間)
也就是說bootstrap.min.css、ui-bootstrap-tpls-0.13.4.js、angular.js要保持一定的版本關係。
在將ui-bootstrap-tpls的版本改為0.13.4之後,又出現如下錯誤提示:
Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $modal
如果是因為版本衝突的原因,自己就嘗試著更換ui-bootstrap-tpls的版本,結果當試到ui-bootstrap-tpls-0.9.0.js時,發現問題解決了。截圖如下:
在熱心網友破狼的大力支援下,問題終於解決了,在此表示深深的謝意。