[Ionic][AngularJS] 相機與相簿 (Camera and Album)
現在相機與相簿 (Camera and Album)是相當基本的功能，那我們要怎樣用AngularJS來實作呢？
![[Ionic][AngularJS] 相機與相簿 (Camera and Album)00001](https://cg2010studio.com/wp-content/uploads/2017/10/ionicangularjs-e79bb8e6a99fe88887e79bb8e7b0bf-camera-and-album00001.png)
Posts tagged ‘AngularJS’
[Ionic][AngularJS] 動作選單 (Action Sheet)
動作選單 (Action Sheet)是個很常用到的介面，原來只要複製以下的程式碼來改就行囉！
![[Ionic] 動作選單 (Action Sheet)](https://cg2010studio.com/wp-content/uploads/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.com/wp-content/uploads/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][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.com/wp-content/uploads/2017/01/ionicangularjs-e99b99e59091e8b387e69699e7b9abe7b590-2-way-data-binding.png?w=540)
此圖解釋得相當直覺！
![[Ionic][AngularJS] 載入Youtube影片.png](https://cg2010studio.com/wp-content/uploads/2016/10/ionicangularjs-e8bc89e585a5youtubee5bdb1e78987.png?w=540)
逍遙文工作室 
HappyMan・迴響