How to pass async data from directive to controller?

Question

I want to compile a third-party api (uploadcare) to a directive.

The api will return the data info after uploaded in async then I want to do something with the return data in my controller but I have to idea how to pass the return data from directive to controller. Below is my code.

in js

        link: function (scope, element, attrs) {
            //var fileEl  = document.getElementById('testing');
            var a = function() {

                var file    = uploadcare.fileFrom('event', {target: fileEl});
                file.done(function(fileInfo) {

                    //scope.$apply(attrs.directUpload)
                   //HERE IS MY PROBLEM.
                   //How can I get the fileInfo then pass and run it at attrs.directUpload

                }).fail(function(error, fileInfo) {

                }).progress(function(uploadInfo) {
                  //Show progress bar then update to node
                  console.log(uploadInfo);
                });
            };

            element.bind('change', function() {a()});
        }

in html

<input type="file" direct-upload="doSomething()">

in controller

$scope.doSomething = function() {alert(fileInfo)};

btw, `uploadcare.fileFrom('event', ...)` is obsolete and is removed in version 1.0. You should use `uploadcare.fileFrom('object', fileEl.files[0])`. — Dmitry Mukhin, Apr 02 '14 at 16:37

Klaster_1 Нет войне · Accepted Answer · 2014-04-02T07:37:54.127

AngularJS allows to execute expression in $parent context with specified values, in your case doSomething().

Here's what you need to do that:

In directive definition, mark directUpload as expression:

scope: {
    directUpload: "&"
}

In done callback, call:

scope.directUpload({fileInfo: fileInfo})

Update markup:

<input type="file" direct-upload="doSomething(fileInfo)">

To summorize: scope.directUpload is now a callback, which executes expression inside attribute with specifeid values. This way you can pass anything into controller's doSomething.

Read $compile docs for detailed explanation and examples.

Example you might find useful:

angular
.module("app", [])
.directive("onDone", function ($timeout) {
  function link (scope, el, attr) {
    $timeout(function () {
      scope.onDone({
        value: "something"
      });
    }, 3000)
  }
  return {
    link: link,
    scope: {
      onDone: "&"
    }
  }
})
.controller("ctrl", function ($scope) {
  $scope.doneValue = "nothing";
  $scope.done = function (value) {
    $scope.doneValue = value;
  };
})

<body ng-controller="ctrl">
  Waiting 3000ms
  <br>
<div on-done="done(value)">
  Done: {{doneValue}}
</div>
</body>

I endorse this option too :) – shaunhusain Apr 02 '14 at 07:23 — shaunhusain, Apr 02 '14 at 07:23

shaunhusain · Answer 2 · 2014-04-02T07:03:02.790

You can pass through an object to the scope of the directive using = within the directive to do two way data binding. This way you can make updates to the data within the directive on the object and it will be reflected in it's original location in the controller. In the controller you can then use $scope.watch to see when the data is changed by the directive.

Something like

http://plnkr.co/edit/gQeGzkedu5kObsmFISoH

// Code goes here

angular.module("myApp",[]).controller("MyCtrl", function($scope){
  $scope.something = {value:"some string"}
}).directive("simpleDirective", function(){
  return {
    restrict:"E",
    scope:{someData:"="},
    template:"<button ng-click='changeData()'>this is something different</button>",
    link: function(scope, iElem, iAttrs){
      scope.changeData=function(){
        scope.someData.value = "something else";
      }
    }
  }
});

How to pass async data from directive to controller?

2 Answers2