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应该工作;否则您需要$broadcast

中的$rootScope

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

然后在你的指令中：

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

angularjs设计。从另一个控制器调用指令函数

1 个答案: