javascript 如何将 Phonegap 相机与 AngularJS 集成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14548567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to integrate Phonegap Camera with AngularJS
提问by drew schmaltz
I'm trying to figure out the best practice for integrating the phonegap camera with AngularJS. The first method I tried was creating a factory with promises that gets called from ng-click. Another way would be putting the code right inside the ng-click within the controller, but then it isn't reusable. Maybe a directive could be made from this? I'm sure there's a few other ways as well. What would the "angularjs" way be?
我试图找出将 phonegap 相机与 AngularJS 集成的最佳实践。我尝试的第一种方法是创建一个带有从 ng-click 调用的承诺的工厂。另一种方法是将代码直接放在控制器内的 ng-click 中，但它是不可重用的。也许可以从中制定指令？我相信还有其他一些方法。“angularjs”的方式是什么？
Here's an example of the factory method that I tried....
这是我尝试过的工厂方法的示例....
The HTML:
HTML：
<button ng-click="takepic">Take Picture</button>
The controller:
控制器：
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();
}
}
The factory:
该工厂：
.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;
}
}
})
回答by asgoth
Personally I would place the logic in a directive, since it will need to access DOM functions (and directives are better suited for that). If you use require: 'ngModel'in your directive, you can use it to store the output value.
我个人会将逻辑放在指令中，因为它需要访问 DOM 函数（指令更适合于此）。如果require: 'ngModel'在指令中使用，则可以使用它来存储输出值。
Html:
网址：
<button camera ng-model='myPicture'>Take Picture</button>
Directive:
指示：
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 }
});
}
};
});
In your controller, you can $watchthe model and push it into an array:
在您的控制器中，您可以$watch将模型推入一个数组中：
$scope.myPictures = [];
$scope.$watch('myPicture', function(value) {
if(value) {
myPictures.push(value);
}
}, true);
回答by Austin Lovell
I added in a few options and corrected the code for other who come across this post like I did. Thank you for your post asgoth!
我添加了一些选项，并为其他像我一样遇到这篇文章的人更正了代码。谢谢你的帖子 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
})
});
}
};
});
