如何將變量從控制器傳遞給指令？ Angular.JS

Question

我試圖理解如何將函數的變量或參數傳遞給指令。

這是我的控制器。

    scope.setFile = function (element) {
        var reader = new FileReader();

        reader.onload = function (event) {
            var uploadedImage = event.target.result;
        };

        // Reads the image as a data URL.
        reader.readAsDataURL(element.files[0]);
    }

我需要將變量uploadedImage推送到指令，以便它可以更新畫布或events參數。 代碼如下：

  fabric.Image.fromURL(event.target.result, function (img) {
          canvas.add(img);
  });

畫布在此定義為特定ID：

            var canvas = new fabric.Canvas(attrs.id, {
                isDrawingMode: true
            });

根據用戶的不同，它將具有不同的ID。 因此在這里傳遞是很重要的。

回到我原來的問題，如何將'event'或變量傳遞給指令？

讓我知道是否還需要添加其他內容以使其更清晰。

Answer 1

您將變量添加到范圍，如下所示：

scope.setFile = function (element) {
    var reader = new FileReader();

    reader.onload = function (event) {
        $scope.uploadedImage = event.target.result;
    };

    // Reads the image as a data URL.
    reader.readAsDataURL(element.files[0]);
}

然后在HTML中

<your-directive var="uploadedImage"></your-directive>

和inside指令你設置范圍變量

module.directive('yourDirective', function() {
  return {
     scope: {
       var: '='
     },
     ...
  };
});

然后，您可以添加watch in指令以檢查更改並更新畫布。