AngularJSionic 学习之 上拉菜单、背景层、下拉列表

简介

这一篇是自身起来攻读ionic JavaScript
部分的首先篇,所以已经办好了踩坑的预备,而且恐怕会遇上重重不懂的地点,所以随手注释,笔记会凌乱些。而且以前从未有过学angularjs,所以也会补充些该地方的知识点

ng-controller

ng-controller 指令用于为你的利用添加控制器。
在控制器中,你可以编制代码,制作函数和变量,并动用 scope
对象来拜会其中的不二法门或性能。

注释

有些接近的API

属性 类型 说明
on-refresh expression 下拉并刷新后触发
on-pulling expression 下拉时触发
pulling-text string 下拉时显示的文字
pulling-icon string 下拉时显示的图标,默认: ‘ion-arrow-down-c’.
spinner string 同refreshing-icon,但spinner基于SVG动画
refreshing-icon string 当用户下拉并松开后,显示等待的图标
disable-pulling-rotation boolean 禁止下拉图标旋转动画

ng-click

ng-click一声令下告诉了 AngularJS HTML 元素被点击后需要执行的操作。

<ion-content >

一个有滚动效应的区域,用于上拉或下拉。
如果ion-content中设有动态内容,需在累加始末后调用$ionicScrollDelegate.resize()双重分析容器尺寸。

下拉刷新

充裕一个下拉刷新的轮转视图。
需将它看成ionContent的第一个子元素。其中$scope.$broadcast("scroll.refreshComplete");本条的功效是呼吁到数码刷新页面。
ng-bind 指令告诉 AngularJS 使用给定的变量或表明式的值来替换 HTML
元素的始末。类似于变量名。
ng-repeat 指令用于循环输出指定次数的 HTML 元素。集合必须是数组或对象。

 <script type="text/javascript">
    angular.module('test', ['ionic'])

      .controller( 'actionsheetCtl',['$scope','$timeout' ,'$http',function($scope,$timeout,$http){

        $scope.items=[
          {
            "name":"HTML5"
          },
          {
            "name":"JavaScript"
          },
          {
            "name":"Css3"
          }
        ];

        $scope.doRefresh = function() {
          $http.get('main.json')   //  内容写成和items一样的格式
            .success(function(newItems) {
              $scope.items = newItems;
            })
            .finally(function() {
              $scope.$broadcast('scroll.refreshComplete');
            });
        };
      }])
  </script>
</head>
<body ng-app="test" ng-controller="actionsheetCtl" >

<ion-pane>
  <ion-content >
    <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
      <ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
    </ion-list>
  </ion-content>
</ion-pane>
</body>

背景层

在组件中得以行使$ionicBackdrop.retain()来突显背景层,使用$ionicBackdrop.release()隐藏背景层。
每一遍调用retain后,背景会向来呈现,直到调用release消除背景层。注释部分参考上边的,此处不作重复。看个例子

 <script type="text/javascript">
    angular.module('test', ['ionic'])

      .controller( 'actionsheetCtl',['$scope','$timeout' ,'$ionicBackdrop',function($scope,$timeout,$ionicBackdrop){

        $scope.action = function() {
          $ionicBackdrop.retain();// retain 调用显示背景层
          $timeout(function() {    //默认让它1秒后消失
//此处写的是定时函数,当然也可以另写一个取消函数
            $ionicBackdrop.release();  // release消除背景层
          }, 1000);
        };
      }])
  </script>
</head>
<body ng-app="test" ng-controller="actionsheetCtl" >
<ion-pane>
  <ion-content >     
    <h2 ng-click="action()">$ionicBackdrop</h2>
  </ion-content>
</ion-pane>
</body>

职能图没怎么赏心悦目的,不截图了

angular.module()方法

AngularJS允许我们使用angular.module()主意来声称模块,这些措施可以承受五个参数,第一个是模块的称谓,第二个是依靠列表,也就是可以被注入到模块中的对象列表。
angular.module('myApp', []);
本条点子相当于AngularJS模块的setter格局,是用来定义模块的。
调用那多少个格局时只要只传递一个参数,就可以用它来引用模块。例如,可以经过以下代码来引用myApp模块:

// 这个方法用于获取应用
angular.module('myApp')

本条点子相当于AngularJS模块的getter办法,用来收获对模块的引用。
接下去,就足以在angular.module('myApp')回到的靶子上创制我们的利用了。

上拉菜单

上拉菜单(ActionSheet)透过往上弹出的框,来让用户挑选选项。你可以因而点击废除按钮或者点击空白的地点来让它消失。

愉快地CV代码,起初攻读,结果出现的是其一鬼样子,颜色和按钮都没得了

百度了须臾间缓解情势,把下图中这段样式注释掉就足以了

AngularJS,化解模式

例行界面是酱紫的

好了,贴一下顺序

  <script type="text/javascript">
    angular.module('test', ['ionic'])
//我们使用angular.module()方法来声明模块,这个方法能够接受两个参数
//第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表
//angular.module('myApp', [])后面的数组可以添加需要依赖的其他module


//ng-controller 指令用于为你的应用添加控制器。
//在控制器中,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。
      .controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){
//$scope 并不处理和操作数据,在视图和控制器之间建立了一个通道
        $scope.show = function() {

// 上拉菜单内容显示,及布局
          var hideSheet = $ionicActionSheet.show({
            buttons: [
              { text: '<b>Share</b> This' },
              { text: 'Move' }
            ],
            destructiveText: 'Delete',
            titleText: 'Modify your album',
            cancelText: 'Cancel',
            cancel: function() {
              // 此处添加取消代码
            },
            buttonClicked: function(index) {
              return true;
            }
          });

//定时函数
          $timeout(function() {
            hideSheet();
          }, 2000);

        };
      }])
  </script>
</head>
<body ng-app="test" ng-controller="actionsheetCtl" >
ng-app="myApp" 来说明app需要从哪个module启动
<ion-pane>            
简单的容器
  <ion-content >       
滚动效果,用于上拉或下拉
    <h2 ng-click="show()">Action Sheet</h2>
  </ion-content>
</ion-pane>
</body>

相关文章