如何将异步数据从指令传递到控制器？答案

【问题标题】：How to pass async data from directive to controller?如何将异步数据从指令传递到控制器？
【发布时间】：2014-04-02 06:32:34
【问题描述】：

我想将第三方 api (uploadcare) 编译成指令。

api 将在异步上传后返回数据信息，然后我想对控制器中的返回数据做一些事情，但我必须知道如何将返回数据从指令传递到控制器。下面是我的代码。

在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()});
        }

在 html 中

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

在控制器中

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

【问题讨论】：

顺便说一句，uploadcare.fileFrom('event', ...) 已过时并在 1.0 版中被删除。你应该使用uploadcare.fileFrom('object', fileEl.files[0])。

标签： angularjs angularjs-directive angularjs-controller uploadcare

【解决方案1】：

AngularJS 允许在 $parent 上下文中使用指定值执行表达式，在您的情况下为 doSomething()。

您需要这样做：

在指令定义中，将directUpload标记为表达式：

scope: {
    directUpload: "&"
}

在done回调中，调用：

scope.directUpload({fileInfo: fileInfo})

更新标记：

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

总结一下：scope.directUpload 现在是一个回调，它使用特定值执行属性内部的表达式。这样你就可以将任何东西传递给控制器的doSomething。

阅读$compile docs了解详细说明和示例。

Example你可能会觉得有用：

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>

【讨论】：

我也支持这个选项 :)

【解决方案2】：

您可以在指令内使用 = 将对象传递到指令的范围内，以进行双向数据绑定。这样，您可以对对象指令中的数据进行更新，它将反映在控制器中的原始位置。然后，您可以在控制器中使用 $scope.watch 来查看指令何时更改数据。

类似

http://plnkr.co/edit/gQeGzkedu5kObsmFISoH

// 代码放在这里

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";
      }
    }
  }
});

【讨论】：