angularjs 디자인. 다른 컨트롤러에서 지시 함수를 호출하는 중

Question

다음 코드가 있습니다 http://plnkr.co/edit/3WRDCv?p=preview 캔버스를 통해 이미지를자를 수있는 지시문이 있습니다. 프로젝트의 상태가 crop-image이고 컨트롤러가 cropController이고 템플릿에 헤더에 단추가 있습니다. 머리글 단추를 누르면 내 지시문 내에서 기능을 수행하고 싶습니다. 어떻게해야합니까? 나는 분리 된 스코프를 어떻게 든 사용하거나 서비스 객체를 만들어야한다는 말을 들었다.

캔버스 directive.js 버튼을 외부 내가 있으리라 믿고있어이 지침의 범위 중 하나입니다, 당신은 그 버튼이있는 메시지를 보내해야하는 경우라면

'use strict'; 
app.directive('myCanvas', function() { 
return { 

restrict: 'E', 
replace: true, 
template: '<div><canvas id="source"></canvas><canvas id="copyCanvas"></canvas></div>', 

// setup two cavases. load original image in one, determine dimensions of 
// the display and render fitted image in the other canvas 
link: function($scope, $element, $attr) { 
    console.log('inside directive imageURI: ' + $scope.imageURI); 

    var canvasSource = $element[0].children[0]; 
    var ctxSource = canvasSource.getContext('2d'); 
    var canvasCopy = $element[0].children[1]; 
    var copyContext = canvasCopy.getContext('2d'); 
    $('#copyCanvas').hide(); 

    var img = new Image(); 
    img.src = $scope.imageURI; 
    var ratio = 0; 
    img.onload = function() { 
    console.log('img:',img, img.width, img.height); 
    console.log('screen:', screen.width, screen.height); 
    console.log('$(window) :', $(window).height(), $(window).width()); 

    $scope.maxWidth = $(window).width(); 
    $scope.maxHeight = $(window).height(); 

    if(img.width > $scope.maxWidth) { 
     ratio = $scope.maxWidth/img.width; 
    } 
    else if(img.height > $scope.maxHeight) { 
     ratio = $scope.maxHeight/img.height; 
    } 
    else { 
     ratio = $scope.maxWidth/img.width; 
    } 

    canvasCopy.width = img.width; 
    canvasCopy.height = img.height; 
    copyContext.drawImage(img, 0, 0); 

    canvasSource.width = img.width * ratio; 
    canvasSource.height = img.height * ratio; 
    ctxSource.drawImage(canvasCopy, 
     0, 0, canvasCopy.width, canvasCopy.height, 
     0, 0, canvasSource.width, canvasSource.height); 

    function showCoords(c) { 
     // variables can be accessed here as 
     // c.x, c.y, c.x2, c.y2, c.w, c.h 
     console.log(c.y, c.y2, c.h); 
     $scope.dy1 = c.y; 
     $scope.dy2 = c.y2; 
    } 
    $('#source').Jcrop({ 
     onSelect: showCoords, 
     onChange: showCoords, 
     bgColor: '#BFAC9E', 
     bgOpacity: 0.4, 
     setSelect: [0, 50, canvasSource.width, canvasSource.height * 0.8], 
     minSize: [ canvasSource.width, 30] 
    }); 

    $scope.cropImage = function() { 
    console.log('button press registered in directive!'); 
    crop(0, $scope.dy1, $scope.maxWidth, $scope.dy2); 
    } 

    $scope.crop = function(x, y, xDif, yDif) { 
    canvasSource.width = xDif; 
    canvasSource.height = yDif; 
    $('#source').css('height', yDif/ratio); 
    $('.jcrop-holder').css('height', yDif/ratio); 
    $('.jcrop-holder div').hide(); 
    ctxSource.drawImage(img, x, y, xDif, yDif, 0, 0, xDif, yDif); 

    croppedImg = canvasSource.toDataURL(); 
    //document.getElementById('output').src = croppedImg; 
    //window.location = "/show-image/" + encodeURIComponent(croppedImg); 
    //window.location.href = croppedImg.replace("image/png", "image/octet-stream"); 
    } 
    }; 
}, 
//scope: { 
// control: '=' 
//}, 

// expose api for cropping images 
controller: function($scope) { 

} 
}; 
}); 

Answer 1

지시어의 컨트롤러가 수신 대기 중입니다. 귀하의 지시어가 헤더 컨트롤러가 속한 요소 안에 있다면, $scope.$broadcast가 작동해야합니다; 그렇지 않으면 당신은 $rootScope에서 $broadcast해야합니다 : 다음

$scope.buttonClick = function() { 
    $scope.$broadcast('button clicked'); 
}); 

당신의 지시에 :

$scope.$on('button clicked', function() { 
    // Do something now that the button is clicked. 
});