Minor image editing functionality alongside AngularJS

Question

If I have an AngularJS enabled web page, what's my best option/convention for adding some light image layering, scaling and positioning (within a specific box) functionality?

Do I start adding jquery for the "controls" I need, or is there a better way?

Answer 1

You can use jQuery but then it won't be just an angular way to do it. How about creating a directive for your controls and upon click call one of the controller method.

HTML:

<div ng-app="Images">

    <div ng-controller="imagesfilter"> 
        <button filter="lighten">Lighten image</button> 
    </div>

</div>

App.js

var Images = angular.module('Images', []);

Directive.js

Images.directive("filter",function(){
    var filter = function(scope,element,attrs) {
        element.bind('click',function(e){
                    e.preventDefault();
                    //calls lighten method on controller
                    scope.$apply(attrs.type); 
                    // if you need to apply any css you can access element here too
        });
    };
    return filter;
});

Controller.js

Images.controller('imagesfilter',['$scope', function ($scope) {
     $scope.lighten = function() {
         // your lighten code here.
     };
}]);