9

phonegap カメラを AngularJS と統合するためのベスト プラクティスを見つけようとしています。私が試した最初の方法は、ng-click から呼び出される promise を持つファクトリを作成することでした。別の方法は、コントローラー内の 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;
        }
    }
})
4

2 に答える 2

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 }
         });
      }
   };
});

controller$watchで、モデルを作成して配列にプッシュできます。

$scope.myPictures = [];
$scope.$watch('myPicture', function(value) {
   if(value) {
      myPictures.push(value);
   }
}, true);
于 2013-01-27T21:23:00.473 に答える
3

私はいくつかのオプションを追加し、私と同じようにこの投稿に出くわした他の人のためにコードを修正しました. asgoさん、投稿ありがとうございます！

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 
            })
         });  
      }
   };
});
于 2014-06-23T22:12:55.170 に答える