javascript - 如何将变量从 Controller 传递给指令？ Angular .JS

Question

我正在尝试了解如何将函数的变量或其参数传递给指令。

这是在我的 Controller 中。

    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 推送到指令，以便它可以更新 Canvas 或事件参数。代码如下:

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

Canvas 在这里被定义为一个特定的ID:

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

根据用户的不同，它会有不同的 ID。它在这里通过很重要。

那么回到我最初的问题，如何将“事件”或变量传递给指令？

如果我需要添加任何其他内容以使其更清楚，请告诉我。

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>

在指令内部设置范围变量

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

然后您可以添加 watch in 指令以检查更改并更新 Canvas 。