ionic1-angular填坑(持續(xù)更新)-2

ionic常用插件——日期選擇

效果圖如下:

Paste_Image.png

1振峻、先導(dǎo)入ionic-datepicker.bundle.min 這個(gè)JS文件。
2客们、在app.js文件中啟動(dòng)模塊注入’ionic-datepicker’
3、頁(yè)面代碼:

<label class="item item-input">
    <span class="input-label">服務(wù)日期:</span>
    <ionic-datepicker input-obj="datepickerObject" class="item-button-right">
        <button class="button button-clear button-positive">
            {{datepickerObject.inputDate | date:'yyyy-MM-dd'}}
        </button>
    </ionic-datepicker>
</label>

4、js中的代碼:

var weekDaysList = ["日", "一", "二", "三", "四", "五", "六"];
var monthList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
var datePickerCallback = function (val) {
    if (typeof(val) === 'undefined') {
        console.log('No date selected');
    } else {
        console.log('Selected date is : ', val);
        $scope.datepickerObject.inputDate = val;
    }
};
$scope.datepickerObject = {
    titleLabel: '日期選擇',  //Optional
    todayLabel: '今天',  //Optional
    closeLabel: '取消',  //Optional
    setLabel: '確定',  //Optional
    setButtonType: 'button-calm',  //Optional
    todayButtonType: 'button-calm',  //Optional
    closeButtonType: 'button-calm',  //Optional
    inputDate: new Date(),    //Optional
    mondayFirst: false,    //Optional
    //disabledDates: disabledDates, //Optional
    weekDaysList: weekDaysList,   //Optional
    monthList: monthList, //Optional
    templateType: 'modal', //Optional
    modalHeaderColor: 'bar-calm', //Optional
    modalFooterColor: 'bar-calm', //Optional
    from: new Date(),   //Optional
    to: new Date(2018, 12, 31), //Optional
    callback: function (val) {    //Mandatory
        datePickerCallback(val);
    }
};

ion-scroll 設(shè)置了隱藏橫向滾動(dòng)條無(wú)效

情景重現(xiàn):

<ion-scroll direction="x" scrollbar-x="false" zooming="false">
        <div class="row text-align-c padding-0">
          <div class="col col-20 border-right padding-0 selection-tap" ng-if="isFindTab"
               ng-class="{0: 'select-button default'}[selectedIndex]"
               ng-click="selectTab(0)">發(fā)現(xiàn)
          </div>
          <div class="col col-20 border-right padding-0 selection-tap"
               ng-class="{1: 'select-button default'}[selectedIndex]"
               ng-click="selectTab(1)">全部
          </div>
          <div class="col col-20 border-right padding-0 selection-tap"
               ng-class="{2: 'select-button default'}[selectedIndex]"
               ng-click="selectTab(2)">冰箱
          </div>
</ion-scroll>

上面代碼里叙淌,ion-scroll 設(shè)置了屬性scrollbar-x="false",但是在瀏覽器觀(guān)看效果時(shí)愁铺,還是會(huì)出現(xiàn)橫向滾動(dòng)條鹰霍,在瀏覽器里查看ion-scroll的屬性時(shí),class屬性 是:class=" scroll-view ionic-scroll scroll-x",

瀏覽器里的樣式

當(dāng)我在代碼里給 ion-scroll 手動(dòng)加一個(gè) style="overflow:hidden;"后茵乱,問(wèn)題就解決了茂洒。。瓶竭。督勺。

實(shí)現(xiàn)長(zhǎng)按復(fù)制文字

html部分

給想要長(zhǎng)按復(fù)制的標(biāo)簽添加屬性 data-tap-disabled="true"

css部分

給改元素添加樣式 -webkit-user-select: text !important;user-select: text !important;

原理

data-tap-disabled 屬性是禁用ionic的tap處理機(jī)制,user-select: text 是讓元素恢復(fù)可選擇斤贰。ionic的滾動(dòng)條是監(jiān)聽(tīng)tap事件的智哀,必須加上了 data-tap-disabled="true" 使ionic停止監(jiān)聽(tīng)該元素的tap事件,這樣該元素才會(huì)觸發(fā)原生的長(zhǎng)按事件荧恍。
來(lái)源:簡(jiǎn)書(shū)

ionic監(jiān)測(cè)app是否在后臺(tái)運(yùn)行

$ionicPlatform.on('pause',function () {
      console.log("app進(jìn)入后臺(tái)運(yùn)行");
    });
$ionicPlatform.on('resume',function () {
      console.log("app進(jìn)入前臺(tái)運(yùn)行");
    });

$ionicpopup定制樣式

無(wú)論是調(diào)用$ionicPopup下面的 alert(), prompt(), and confirm()都可以傳一個(gè)對(duì)象當(dāng)做參數(shù)瓷叫。如:

{
  title: '', // String. The title of the popup.
  cssClass: '', // String, The custom CSS class name
  subTitle: '', // String (optional). The sub-title of the popup.
  template: '', // String (optional). The html template to place in the popup body.
  templateUrl: '', // String (optional). The URL of an html template to place in the popup   body.
  scope: null, // Scope (optional). A scope to link to the popup content.
  buttons: [{ // Array[Object] (optional). Buttons to place in the popup footer.
    text: 'Cancel',
    type: 'button-default',
    onTap: function(e) {
      // e.preventDefault() will stop the popup from closing when tapped.
      e.preventDefault();
    }
  }, {
    text: 'OK',
    type: 'button-positive',
    onTap: function(e) {
      // Returning a value will cause the promise to resolve with the given value.
      return scope.data.response;
    }
  }]
}

很關(guān)鍵的一個(gè)屬性是 cssClass屯吊,這里定義的class類(lèi)名將會(huì)添加到彈出框的最外層的div上,然后只要把自己想要定制的樣式寫(xiě)進(jìn)在css或者sass里面就可以了摹菠,

詳細(xì)信息請(qǐng)查看官網(wǎng)網(wǎng)址:$ionicPopup詳細(xì)使用說(shuō)明

angular關(guān)于http攔截器

angularJs通過(guò)攔截器提供了一個(gè)從全局層面對(duì)http請(qǐng)求進(jìn)行處理的途徑盒卸。

攔截服務(wù)工廠(chǎng)

var app = angular.module("ajaxHttp", []);
app.factory("httpInterceptor", [ "$q", "$rootScope", function($q, $rootScope) {
return {
//該方法會(huì)在 $http 發(fā)送請(qǐng)求后臺(tái)之前執(zhí)行
//該方法接收請(qǐng)求配置對(duì)象(request configuration object)作為參數(shù),然后必須返回配置對(duì)象或者 promise 次氨。
request: function(config) {
// do something on request success
    return config || $q.when(config);
},
//該方法會(huì)俘獲那些被上一個(gè)請(qǐng)求攔截器中斷的請(qǐng)求
requestError: function(rejection) {
// do something on request error
    return $q.reject(rejection)
   },
//該方法會(huì)在 $http 接收到從后臺(tái)過(guò)來(lái)的響應(yīng)之后執(zhí)行
//該方法接收響應(yīng)對(duì)象(response object)作為參數(shù)蔽介,然后必須返回響應(yīng)對(duì)象或者 promise。響應(yīng)對(duì)象包括了請(qǐng)求配置(request configuration)煮寡,頭(headers)虹蓄,狀態(tài)(status)和從后臺(tái)過(guò)來(lái)的數(shù)據(jù)(data)。
response: function(response) {
// do something on response success
    return response || $q.when(response);
},
//有時(shí)候我們后臺(tái)調(diào)用失敗了洲押,也有可能它被一個(gè)請(qǐng)求攔截器拒絕了或者被上一個(gè)響應(yīng)攔截器中斷了武花。在這種情況下,響應(yīng)異常攔截器可以幫助我們恢復(fù)后臺(tái)調(diào)用杈帐。
responseError : function(rejection) {
// do something on response error
    return $q.reject(rejection);
}
};
}]);

注冊(cè)攔截工廠(chǎng)方法

app.config(["$httpProvider", function($httpProvider) {
  $httpProvider.interceptors.push("httpInterceptor");
}]);

ionic里面view的緩存設(shè)置與清除

//設(shè)置視圖元素緩存到Dom中的數(shù)量体箕,默認(rèn)為10
$ionicConfigProvider.views.maxCache(10);
//將所有緩存的頁(yè)面清除
$ionicHistory.clearCache();

ionic里 ion-content標(biāo)簽的注意點(diǎn)

如果你給ion-content標(biāo)簽加了 下內(nèi)邊距(padding-bottom),那么當(dāng)你的內(nèi)容區(qū)域可以滾動(dòng)時(shí)挑童,最下面的內(nèi)容將會(huì)展示不出來(lái)累铅,也就是向上滾動(dòng)不到可視區(qū)域,原因是:當(dāng)html被解析出來(lái)后站叼,ion-content里面會(huì)包一層 ion-scroll標(biāo)簽(前提是你不給ion-content設(shè)置 scroll="false"娃兽,因?yàn)樵O(shè)置了屬性scroll為false,ion-scroll將不會(huì)解析到html文檔里)尽楔,這個(gè)ion-scroll的最下方是跟ion-content的最下方的邊框挨著的投储,并不是跟ion-content的內(nèi)容區(qū)域的下邊界挨著。所以因?yàn)閜adding-bottom的緣故會(huì)顯示不全阔馋。

解決辦法

只需要給ion-content設(shè)置 margin-bottom即可

ion-modal的使用

ion-modal可以用來(lái)在當(dāng)前頁(yè)面彈出一個(gè)完整的頁(yè)面

使用方法
angular.module('testApp', ['ionic'])
//注入 $ionicModal
.controller('MyController', function($scope, $ionicModal) {
//用 fromTemplateUrl 引入modal 模板
  $ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope,//modal的作用域
    animation: 'slide-in-up'//modal, 進(jìn)入的動(dòng)畫(huà)
    focusFirstInput:true,//是否自動(dòng)對(duì)焦顯示模態(tài)的第一個(gè)輸入玛荞。只會(huì)在iOS上顯示鍵盤(pán),強(qiáng)制鍵盤(pán)在Android上顯示呕寝,請(qǐng)使用Ionic鍵盤(pán)插件.插件地址在代碼片段下面勋眯。默認(rèn)值:false
    backdropClickToClose:false,//是否關(guān)閉點(diǎn)擊背景幕的模式。默認(rèn)值:true下梢。
    hardwareBackButtonClose:false客蹋,//使用Android和類(lèi)似設(shè)備上的硬件返回按鈕可以關(guān)閉模??態(tài)。默認(rèn)值:true孽江。
  })
  //返回一個(gè)promise
  .then(function(modal) {
    $scope.modal = modal;//把引入的modal賦值給當(dāng)前作用域下的變量
  });
  $scope.openModal = function() {
    //如果modal沒(méi)有在顯示
    if(!$scope.modal.isShow()){
      $scope.modal.show();//顯示modal
    }
  };
  $scope.closeModal = function() {
    $scope.modal.hide();//隱藏modal
  };
  //當(dāng)我們用完模型時(shí)讶坯,清除它!
  //因?yàn)槊看螐棾鰉odal都會(huì)在html中生成表示modal的標(biāo)簽岗屏,如果不手動(dòng)remove闽巩,下次再?gòu)棾鰜?lái)modal將會(huì)又生成一個(gè)代表modal的標(biāo)簽钧舌。
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // 當(dāng)隱藏模型時(shí)執(zhí)行動(dòng)作
  $scope.$on('modal.hide', function() {
    // 執(zhí)行動(dòng)作
  });
  // 當(dāng)移動(dòng)模型時(shí)執(zhí)行動(dòng)作
  $scope.$on('modal.removed', function() {
    // 執(zhí)行動(dòng)作
  });
});
小提示:上面代碼中提到的Ionic鍵盤(pán)插件github地址Ionic鍵盤(pán)插件
ionic的ion-header-bar標(biāo)簽?zāi)J(rèn)是會(huì)在ios系統(tǒng)中騰出20像素的高度給status狀態(tài)欄的。

angular 自定義指令中 link涎跨、compile、controller的執(zhí)行順序

compile >>controller >> compile pre >> compile post >> link(沒(méi)有compile的情況崭歧。如果有compile隅很,那么link不會(huì)執(zhí)行)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末率碾,一起剝皮案震驚了整個(gè)濱河市叔营,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌所宰,老刑警劉巖绒尊,帶你破解...
    沈念sama閱讀 223,126評(píng)論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異仔粥,居然都是意外死亡婴谱,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門(mén)躯泰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)谭羔,“玉大人,你說(shuō)我怎么就攤上這事麦向∥谅悖” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,941評(píng)論 0 366
  • 文/不壞的土叔 我叫張陵诵竭,是天一觀(guān)的道長(zhǎng)话告。 經(jīng)常有香客問(wèn)我,道長(zhǎng)卵慰,這世上最難降的妖魔是什么沙郭? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,294評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮呵燕,結(jié)果婚禮上棠绘,老公的妹妹穿的比我還像新娘。我一直安慰自己再扭,他們只是感情好氧苍,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,295評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著泛范,像睡著了一般让虐。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上罢荡,一...
    開(kāi)封第一講書(shū)人閱讀 52,874評(píng)論 1 314
  • 那天赡突,我揣著相機(jī)與錄音对扶,去河邊找鬼。 笑死惭缰,一個(gè)胖子當(dāng)著我的面吹牛浪南,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播漱受,決...
    沈念sama閱讀 41,285評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼络凿,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了昂羡?” 一聲冷哼從身側(cè)響起絮记,我...
    開(kāi)封第一講書(shū)人閱讀 40,249評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎虐先,沒(méi)想到半個(gè)月后怨愤,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,760評(píng)論 1 321
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蛹批,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,840評(píng)論 3 343
  • 正文 我和宋清朗相戀三年撰洗,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片般眉。...
    茶點(diǎn)故事閱讀 40,973評(píng)論 1 354
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡了赵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出甸赃,到底是詐尸還是另有隱情柿汛,我是刑警寧澤,帶...
    沈念sama閱讀 36,631評(píng)論 5 351
  • 正文 年R本政府宣布埠对,位于F島的核電站络断,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏项玛。R本人自食惡果不足惜貌笨,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,315評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望襟沮。 院中可真熱鬧锥惋,春花似錦、人聲如沸开伏。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,797評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)固灵。三九已至捅伤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間巫玻,已是汗流浹背丛忆。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,926評(píng)論 1 275
  • 我被黑心中介騙來(lái)泰國(guó)打工祠汇, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人熄诡。 一個(gè)月前我還...
    沈念sama閱讀 49,431評(píng)論 3 379
  • 正文 我出身青樓可很,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親粮彤。 傳聞我的和親對(duì)象是個(gè)殘疾皇子根穷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,982評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 由于瀏覽器都有同源加載策略,不能加載不同域下的文件导坟、也不能使用不合要求的協(xié)議比如file進(jìn)行訪(fǎng)問(wèn)。 在angula...
    大巴純爺們閱讀 1,428評(píng)論 0 4
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理圈澈,服務(wù)發(fā)現(xiàn)惫周,斷路器,智...
    卡卡羅2017閱讀 134,720評(píng)論 18 139
  • Documentation Supported OS & SDK Versions 支持的OS & SDK版本 S...
    c5550ea746f8閱讀 4,357評(píng)論 0 2
  • #運(yùn)營(yíng)基本情況 抱歉啦康栈,各位递递,我二月份偷懶啦,二月份我只發(fā)了26條微博啥么,還是95%是轉(zhuǎn)發(fā)的S的登舞,只長(zhǎng)了180個(gè)粉。...
    d99a78e658a0閱讀 197評(píng)論 0 1
  • 每當(dāng)聽(tīng)到這五個(gè)字時(shí)悬荣,我都會(huì)忍不住鼻酸菠秒。當(dāng)你喜歡一個(gè)人時(shí),徘徊不定氯迂,猶豫不決践叠,不知道怎么辦時(shí)。誰(shuí)是你的心藥嚼蚀,給你最真...
    Change辛年閱讀 325評(píng)論 0 0