我试图找出将手机相机与AngularJS集成的最佳做法.我尝试的第一种方法是创建一个工厂,承诺将从ng点击调用.另一种方法是将代码正确放在控制器内的ng-click内,但不能重复使用.也许可以这样做？我确定还有其他一些方法. “anglejs”的方式是什么？
这是我尝试的工厂方法的一个例子
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;
}
}
})
解决方法
就我个人而言,我将逻辑放在一个指令中,因为它需要访问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 }
});
}
};
});
在你的控制器中,你可以看看模型并将其推入一个数组：
$scope.myPictures = [];
$scope.$watch('myPicture',function(value) {
if(value) {
myPictures.push(value);
}
},true);
