如何将变量从控制器传递给指令? Angular.JS

时间:2015-12-31 15:22:49

标签: javascript angularjs angularjs-directive

我试图理解如何将函数的变量或参数传递给指令。

这是在我的控制器中。

    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会有不同的ID。因此在这里传递是很重要的。

回到我原来的问题,我怎样才能通过'事件'或变量指令?

请告诉我是否还需要添加其他内容以使其更清晰。

1 个答案:

答案 0 :(得分:2)

您可以将变量添加到范围内,如下所示:

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