[Ionic][AngularJS] 相機與相簿 (Camera and Album)
現在相機與相簿 (Camera and Album)是相當基本的功能，那我們要怎樣用AngularJS來實作呢？
![[Ionic][AngularJS] 相機與相簿 (Camera and Album)00001](https://cg2010studio.files.wordpress.com/2017/10/ionicangularjs-e79bb8e6a99fe88887e79bb8e7b0bf-camera-and-album00001.png)
Archive for the ‘Ionic’ Category
[Ionic][AngularJS] 動作選單 (Action Sheet)
動作選單 (Action Sheet)是個很常用到的介面，原來只要複製以下的程式碼來改就行囉！
![[Ionic] 動作選單 (Action Sheet)](https://cg2010studio.files.wordpress.com/2017/10/ionic-e58b95e4bd9ce981b8e596ae-action-sheet.png?w=540)
/**
Theme: Action Sheet
IDE: None
Language: AngularJS
Date: 106/10/16
Author: HappyMan
Blog: https://cg2010studio.com/
*/
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: '照相' },
{ text: '相簿' }
],
// destructiveText: 'Delete',
titleText: '請選擇',
cancelText: '取消',
cancel: function() {
console.log('cancel add');
},
buttonClicked: function(index) {
if (index == 0) {
console.log('照相');
}
if (index == 1) {
console.log('相簿');
}
return true;
}
});
記得要引用$ionicActionSheet。
參考：ionic 1- $ionicActionSheet。
[Ionic][AngularJS] 選單
就像人生，面臨許多選擇，AngularJS選單可以怎麼呈現呢？
![[Ionic][AngularJS] 選單.png](https://cg2010studio.files.wordpress.com/2017/07/ionicangularjs-e981b8e596ae.png?w=540)
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;
};
[Ionic][AngularJS] 回傳呼叫 (Callback)
呼叫API之後，要等它處理完並傳回訊息，就能進行接下來的工作，這個行為叫做回傳呼叫 (Callback)，類似其它語言的Closure或Block。
那麼在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
[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。
[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設定的問題囉～
[Ionic][AngularJS] 雙向資料繫結 (2-way Data Binding)
平台特性真的要好好瞭解一下，原來AngularJS有雙向資料繫結 (2-way Data Binding)的特性。
所謂雙向(2-way)是指controller與view兩邊對資料模型的操作，都會即時更新，使得controller與view兩邊的資料一致。
![[Ionic][AngularJS] 雙向資料繫結 (2-way Data Binding).png](https://cg2010studio.files.wordpress.com/2017/01/ionicangularjs-e99b99e59091e8b387e69699e7b9abe7b590-2-way-data-binding.png?w=540)
此圖解釋得相當直覺！
[Ionic] 視圖生命週期 (Ionic View Life Cycle)
在寫iOS Native App時早已知道視圖生命週期 (View Life Cycle)非常重要，因為它會決定我們接下來時做的流程。現在使用Ionic同樣也有視圖生命週期 (Ionic View Life Cycle)，現在就稍微來瞭解其前後關係吧！
逍遙文工作室 
HappyMan・迴響