AngularJS와 함께 사소한 이미지 편집 기능

Question

AngularJS를 사용하는 웹 페이지가있는 경우 특정 이미지 내에서 이미지 레이어링, 크기 조정 및 위치 지정 기능을 추가하는 최선의 방법/규칙은 무엇입니까?

"컨트롤"에 jquery를 추가하기 시작합니까? 아니면 더 좋은 방법이 있습니까?

Answer 1

jQuery를 사용할 수는 있지만 각도를 사용하는 방법이 아닙니다. 컨트롤에 대한 지시문을 만들고 클릭하면 컨트롤러 메서드 중 하나를 호출하는 방법에 대해 설명합니다.

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

컨트롤러 .js

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