如何整合PhoneGap的摄像机，AngularJS

问题描述

我试图找出最佳实践为PhoneGap的摄像头，支持AngularJS整合。我尝试的第一个方法是创建与该会从NG-点击所谓承诺的工厂。另一种方法是把控制器内的NG-点击里面的code正确，但随后是不能重复使用。也许一个指令可以从这个制成？我敢肯定有一些其他的方式为好。什么会了angularjs的方式是什么？

下面是工厂方法，我试图....

的例子

中的HTML：

 ＆LT;按钮NG点击=takepic＆GT;以图片＆LT; /按钮＆GT;
 

控制器：

 函数picturePageCtrl（$范围，摄像机）{
    $ scope.takepic =功能（）{
        //我想推入的图片这里的数组这一点。
        //但是很难推（）与承诺。
        Camera.getPic（）;
    }
}
 

工厂：

  .factory（'摄像头'，函数（$ Q）{
    变种推迟= $ q.defer（）;
    返回{
        方法GetPic：功能（）{
            navigator.camera.getPicture（
                功能（imageURI）{
                    deferred.resolve（imageURI）;
                }，
                功能（消息）{
                    deferred.reject（消息）;
                }，
                {
                    品质：50，
                    destinationType：Camera.DestinationType.FILE_URI
                }
            ）;
            返回deferred.promise;
        }
    }
}）
 

解决方案

我个人放在逻辑指令，因为它需要访问DOM函数（指令是为更适合）。如果你使用要求：ngModel在你的指令，你可以用它来存储输出值

。

HTML：

 ＆LT;按钮相机NG-模式='myPicture'＆GT;以图片＆LT; /按钮＆GT;
 

指令：

  app.directive（'摄像头'，函数（）{
   返回{
      限制：'A'，
      要求：'ngModel'，
      链接：功能（范围，榆树，ATTRS，CTRL）{
         elm.on（'点击'，功能（）{
            navigator.camera.getPicture（功能（imageURI）{
               范围。$应用（函数（）{
                  CTRL $ setViewValue（imageURI）。
               }）;
            }，功能（错误）{
               CTRL $ setValidity（'错误'，虚假）。
            }，{质量：50，destinationType：Camera.DestinationType.FILE_URI}
         }）;
      }
   };
}）;
 

在您的控制器，您可以 $观看模型并将其推到一个数组：

  $ scope.myPictures = [];
$范围。$腕表（'myPicture'，功能（价值）{
   如果（值）{
      myPictures.push（值）;
   }
}，真正的）;
 

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?

Here's an example of the factory method that I tried....

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

解决方案

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.

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 $watch the model and push it into an array:

$scope.myPictures = [];
$scope.$watch('myPicture', function(value) {
   if(value) {
      myPictures.push(value);
   }
}, true);

这篇关于如何整合PhoneGap的摄像机，AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！