如何将变量从控制器传递到指令？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推送到指令中，以便它可以更新画布或事件参数。以下是代码：

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

在这里将canvas定义为特定的ID：

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

根据用户的不同，它将具有不同的ID。因此，在这里传递它非常重要。

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

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

- MaxwellLynn

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，以检查更改并更新画布。

- jcubic

---

这是一个很好的答案，谢谢。出于好奇，您如何添加监视器以便如果变量更改，我可以在指令中的某个函数上重置一些代码？ - MaxwellLynn

在link函数中添加$scope.$watch('var', function(newValue, oldValue) { });，MaxwellLynn。 - jcubic