ionic model指令学习

文章参考

http://blog.csdn.net/pdw2009/article/details/47832921

http://www.cnblogs.com/CheeseZH/p/4522264.html

Ionic中[弹出式窗口]有两种（如下图所示），ionicModal和ionicModal和ionicPopup;

$ionicModal是完整的页面；

$ionicPopup是(Dialog)对话框样式的，直接用JavaScript设定对话框的一些参数，通常用于通知消息、确认等作用；

例子

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <!--<script src="public/js/jquery.js"></script>-->
    <script src="../public/ionic/js/ionic.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../public/ionic/css/ionic.min.css">
</head>
<body ng-controller="myCtrl">


<ion-header-bar class="bar-energized">
    <h1 class="title">Contact Info</h1>
</ion-header-bar>
<ion-content>
    <div class="card" ng-click="openModal()">
        <div class="item item-divider">
            {{contact.name}}
        </div>
        <div class="item item-text-wrap">
            {{contact.info}}
        </div>
    </div>
</ion-content>

<script id="contact-modal.html" type="text/ng-template">
    <div class="modal">
        <ion-header-bar>
            <h1 class="title">Edit Contact</h1>
        </ion-header-bar>
        <ion-content>
            <div class="list">
                <label class="item item-input">
                    <span class="input-label">Name</span>
                    <input type="text" ng-model="contact.name">
                </label>
                <label class="item item-input">
                    <span class="input-label">Info</span>
                    <input type="text" ng-model="contact.info">
                </label>
            </div>

            <button class="button button-full button-energized" ng-click="closeModal()">Done</button>
        </ion-content>
    </div>
</script>


</body>
</html>

<script>
    angular.module('myApp', ['ionic'])
            .controller('myCtrl', function($scope,$ionicModal) {

                $scope.contact = {
                    name: 'Mittens Cat',
                    info: 'Tap anywhere on the card to open the modal'
                };

                $ionicModal.fromTemplateUrl('contact-modal.html', {
                    scope: $scope,
                    animation: 'slide-in-up'
                }).then(function(modal) {
                    $scope.modal = modal
                });

                //弹出model 层
                $scope.openModal = function() {
                    $scope.modal.show()
                };

                //关闭model 层
                $scope.closeModal = function() {
                    $scope.modal.hide();
                };

                
                $scope.$on('$destroy', function() {
                    $scope.modal.remove();
                });

            });

</script>

这部分需要注意以下几点：

（1）不要忘了function的参数$ionicModal，否则会报错（用浏览器的调试工具F12可以看到）

（2）使用fromTemplateUrl将HTML代码中script（根据id）在HTML页面生成自己的Modal（也就是说，在打开页面的时候，是没有图3中的红色 div的，当调用了fromTemplateUrl之后，才会生成这个div，而且每调用一次就会生成一个红色 div哦，所以写代码的时候要把逻辑设计好，注意及时remove()。）；

（3）openModal和closeModal函数很容易理解，这个估计是Modal最常用的方法；

（4）可以通过scope.scope.on来进行更丰富的操作（当然，不用scope.scope.on也可以进行丰富的操作。）；

添加$ionicModal依赖，便可以使用$ionicModal。$ionicModal使用了deferred来异步加载模板，加载完成后会返回modal对象，这里使用了$scope.modal = modal来接收这个modal对象，从而控制这个modal。这样我们就实现了一个modal。

ionic model指令学习

猜你喜欢