Just a Computer Graphics Studio & My Life

Archive for the ‘Ionic’ Category

[Ionic][AngularJS] 選單

就像人生,面臨許多選擇,AngularJS選單可以怎麼呈現呢?

[Ionic][AngularJS] 選單.png

View的部分可以這麼寫:

/**
 Theme: AngularJS Select
 IDE: Sublime
 Language: Javascript
 Date: 106/07/13
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

    <select ng-init="somethingHere = kidList[0]"
ng-model="somethingHere"
ng-options="option.Name for option in kidList"
ng-change="select()">
    </select>

  • ng-init為預設值
  • ng-model為被選擇的變數
  • ng-options為選擇項目
  • ng-change為選擇後的行為

Controller可以這麼做:

/**
 Theme: AngularJS Select
 IDE: Sublime
 Language: Javascript
 Date: 106/07/13
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

  $scope.kidList = JSON.parse(AuthService.storageGet('kidList'));

  $scope.select = function () {
       $scope.selectId = $scope.somethingHere.Id;
  };

參考:getting the ng-object selected with ng-change

廣告

[Ionic][AngularJS] 回傳呼叫 (Callback)

呼叫API之後,要等它處理完並傳回訊息,就能進行接下來的工作,這個行為叫做回傳呼叫 (Callback),類似其它語言的ClosureBlock

那麼在AngularJS要怎麼實現Callback呢?

原來函數中的參數,可以函數型態傳入呀!

/**
 Theme: Callback
 IDE: Sublime
 Language: Javascript
 Date: 106/07/08
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

function two() {
	console.log("value is 2")
}
function one(callback) {
	console.log("value is 1")
	callback()
}
one(function() {
	two()
}) 

執行結果:

value is 1
value is 2

參考:Wait for callback response in AngularJS / Ionic

[Ionic][AngularJS] Youtube 離開畫面停止播放

承接[Ionic][AngularJS] 載入Youtube影片,想要離開畫面就停止播放,該怎麼做呢?因為進到下一頁,正在播放的影片還沒有被移除,就會持續播放下去。

在controllers.js中寫:

.controller('ResultCtrl', function($scope, $sce) {

  $scope.pauseVideo = function() {
    console.log('postMessage pauseVideo');
    var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage('{"event":"command","func":"' + 'pauseVideo' +   '","args":""}', '*');
  }

  $scope.playVideo = function() {
    console.log('postMessage playVideo');
    var iframe = document.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage('{"event":"command","func":"' + 'playVideo' +   '","args":""}', '*');
  }

  $scope.$on('$ionicView.beforeLeave', function(){
    console.log('pauseVideo');
    $scope.pauseVideo();
  });

  $scope.$on('$ionicView.enter', function(){
    console.log('playVideo');
    $scope.playVideo();
  });

})

還要在Youtube影片網址後方連接參數⋯⋯

?enablejsapi=1

格式會像是:https://www.youtube.com/embed/uSmcLz2FAUI?enablejsapi=1

程式碼才會有作用喔~

參考:How to pause or stop an iframe youtube video when you leave a tab view or minimise your Ionic App

[AngularJS] Angular Chart

有時候一些數據想要視覺化呈現,讓人看了一目瞭然,如果不想要自己花時間做介面與動畫,那麼就可以考慮第三方套件Angular Chart

Angular Chart Radar Chart.png

(繼續閱讀…)

[Ionic] Android 編譯錯誤之中文檔名

還沒有真正開發過Android native app,就要先用Ionic來編譯Hybrid app的Android版本,當然一開始是最難的,因為前方有一堆你還沒遇過的問題擋在前面,途中我已劈荊斬棘,當前我遇到中文檔名的問題,當然一開始不曉得,查了網路上前人的經驗才疑惑地嘗試。

明明Hybrid app的iOS版本沒有問題,卻在透過Android Studio編譯成Hybrid app的Android版本有問題⋯⋯

(繼續閱讀…)

關於Access Control Allow Origin

關於Access Control Allow Origin。查了網路,SO裡頭有好多人有同樣的問題,發現最好的解決方式就是透過server來設定response的header。

我使用Chrome來debug,發現正要用的domain會有下列回應,套上先人使用的domain來測試,沒有這樣的回應,所以猜想是server設定的問題囉~

Access Control Allow Origin.png

(繼續閱讀…)

[Ionic][AngularJS] 雙向資料繫結 (2-way Data Binding)

平台特性真的要好好瞭解一下,原來AngularJS雙向資料繫結 (2-way Data Binding)的特性。

所謂雙向(2-way)是指controller與view兩邊對資料模型的操作,都會即時更新,使得controller與view兩邊的資料一致。

[Ionic][AngularJS] 雙向資料繫結 (2-way Data Binding).png

此圖解釋得相當直覺!

(繼續閱讀…)

標籤雲

%d 位部落客按了讚: