我正在尝试找出将phonegap相机与AngularJS集成的最佳做法。我尝试的第一种方法是创建一个带有从ng-click调用的promises的工厂。另一种方法是将代码放在控制器内的ng-click内,但是它不可重复使用。也许可以从中做出指示?我相信还有其他一些方法。 “angularjs”会是什么样的?
这是我尝试的工厂方法的一个例子....
HTML:
<button ng-click="takepic">Take Picture</button>
控制器:
function picturePageCtrl($scope, Camera) {
$scope.takepic = function() {
// I'd like to push this into an array of "pics" here.
// but it is hard to push() with promises.
Camera.getPic();
}
}
工厂:
.factory('Camera', function($q) {
var deferred = $q.defer();
return {
getPic: function() {
navigator.camera.getPicture(
function (imageURI) {
deferred.resolve(imageURI);
},
function (message) {
deferred.reject(message);
},
{
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
}
);
return deferred.promise;
}
}
})
答案 0 :(得分:11)
我个人会将逻辑放在一个指令中,因为它需要访问DOM函数(并且指令更适合于此)。如果在指令中使用require: 'ngModel'
,则可以使用它来存储输出值。
<强> HTML 强>
<button camera ng-model='myPicture'>Take Picture</button>
<强>指令:强>
app.directive('camera', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
elm.on('click', function() {
navigator.camera.getPicture(function (imageURI) {
scope.$apply(function() {
ctrl.$setViewValue(imageURI);
});
}, function (err) {
ctrl.$setValidity('error', false);
}, { quality: 50, destinationType: Camera.DestinationType.FILE_URI }
});
}
};
});
在控制器中,您可以$watch
模型并将其推送到数组中:
$scope.myPictures = [];
$scope.$watch('myPicture', function(value) {
if(value) {
myPictures.push(value);
}
}, true);
答案 1 :(得分:3)
我添加了几个选项并更正了其他遇到此帖子的代码,就像我做的那样。谢谢你的帖子asgoth!
app.directive('camera', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
elm.on('click', function() {
navigator.camera.getPicture(function (imageURI) {
scope.$apply(function() {
ctrl.$setViewValue(imageURI);
});
}, function (err) {
ctrl.$setValidity('error', false);
}, {
quality : 50,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 1000,
targetHeight: 1000,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
})
});
}
};
});