Angular.js и Fabric.js: изменение холста ткани после того, как код перемещен в угловую директиву.

Question

У меня есть приложение AngularJS/FabricJs, цель которого - разрешить перемещение/изменение размера изображения перед загрузкой. По существу четыре этапа:

1) I present a form with a canvas, and a rectangle inside of form to represent a clip area 
2) browse for a local file 
3) add it to the canvas 
4) and have a button to capture the clip area inside of the canvas 

Проблема возникает, когда я перемещаю код из непосредственно встроенной формы и сижу за угловой директивой. Как только я переместил форму в директиву, проблема возникла, изображение загрузилось и добавлено на холст без (каких-либо очевидных) проблем. Однако, как только вы нажимаете в любом месте на холсте (например, при попытке перемещения изображения), добавленное изображение больше не появляется на холсте (хотя проверка объекта Canvas по-прежнему показывает его как внутри массива объектов).

, ИС приложений и помощник:

var myApp = angular.module('myApp', []) 

// helper function to bind tot he on change of a input/file object (angularJs workaround) 
var invokeImageChange = function(that) { 
    angular.element(that).scope().imageChange(that) 
    angular.element(that).scope().$digest(); 
} 

Контроллер:

var ImageCtrl = function($scope) { 

    var desiredHeight = 300 
    var desiredWidth = 770 

    // I understand this docucment.gelElementById is not the angular way - and needs to be changed 
    var myImageData = document.getElementById('fileData') 
    var myImage = document.getElementById('myImage') 
    var canvas = new fabric.Canvas('myCanvas') 

    var rect = new fabric.Rect({ 
     fill: 'lightgray', 
     left: canvas.width/2, 
     top: canvas.height/2, 
     width: desiredWidth, 
     height: desiredHeight, 
     stroke: 'darkgray', 
     strokeDashArray: [5, 5], 
     selectable: false 
    }); 
    canvas.add(rect) 
    var clipZone = { 
     y: rect.top - (.5 * rect.height), 
     x: rect.left - (.5 * rect.width), 
     width: desiredWidth, 
     height: desiredHeight, 
     quality: 1 
    } 

    $scope.caption = "" ; 
    $scope.fileUrl = "" ; 

    $scope.imageChange = function(inp) { 
     console.log('imageChange') 
     file = inp.files[0]; 
     fr = new FileReader(); 
     fr.onload = createImage; 
     fr.readAsDataURL(file); 

     var img = null 

     function createImage() { 
      console.log('createImage') 
      img = new Image(); 
      img.onload = imageLoaded; 
      img.src = fr.result; 
     } 

     function imageLoaded() { 
      console.log('imageLoaded') 
      var fabImg = new fabric.Image(img) 

      fabImg.scale(1.0).set({ 
       left: canvas.width/2, 
       top: canvas.height/2 
      }); 

      canvas.add(fabImg) 
      canvas.setActiveObject(fabImg) 
     } 
    } 

    $scope.submit = function(event) { 

    } 

    $scope.capture = function() { 
     console.log('capture') 

    } 
} 

Директива Код:

myApp.directive('ngImageEditor', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    replace: true, 
    controller: 'ImageCtrl', 
    templateUrl: '\blah\pathToForm' 
    }; 
}); 

, где TemplateUrl относится к этой форме

<form name="uploadForm" ng-controller="ImageCtrl" method="post" enctype="multipart/form-data" 
     action="/main/update" ng-submit="submit()"> 
    <div class="control-group"> 
     <label class="control-label" for="file">Image File</label> 
     <div class="controls"> 
      <input type="file" name="file" ng-model="file" onchange="invokeImageChange(this)"/> 
      <input type="text" id="fileData" name="fileData" ng-model="fileUrl"/> 
     </div> 
    </div> 
    <div class="control-group"> 
     <div class="controls"> 
      <input type="button" value="Upload" ng-click="capture()"/> 
     </div> 
    </div> 
    <div> 
     <canvas id="myCanvas" width="800" height="400" style="border:1px solid #000000;"></canvas> 
    </div> 
    <img id="myImage" style="border: 1px solid burlywood"> 
</form> 

Надеюсь, JsFiddle ниже поможет людям понять, о чем я говорю. Заранее спасибо!

Для воспроизведения

1) browse to an image 
2) move the image (notice the image disappears in the second link) 

Рабочая (изображение может быть перемещена) (без директивы):

http://jsfiddle.net/PNwbp/1/

испорченными/Проблемы (изображение исчезает при перемещении) (с директивой):

http://jsfiddle.net/faFVW/23/

Answer 1

Извлеките ng-controller = "ImageCtrl" из вашего шаблона, в котором создается еще одна область и экземпляр Controller, и это прерывает ее.

<form name="uploadForm" /*ng-controller="ImageCtrl"*/ method="post" enctype="multipart/form-data" 
     action="/main/update" ng-submit="submit()">