如何將async數據從指令傳遞給控制器？

Question

我想將第三方api（uploadcare）編譯成指令。

api將在async上傳后返回數據信息，然后我想對我的控制器中的返回數據做一些事情，但我不得不知道如何將返回數據從指令傳遞給控制器。 以下是我的代碼。

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

Answer 1

AngularJS允許在$parent上下文中使用指定值執行表達式，在您的情況下是doSomething() 。

這是你需要做的：

在指令定義中，將directUpload標記為表達式：

scope: {
    directUpload: "&"
}

在done回調中，請致電：

scope.directUpload({fileInfo: fileInfo})

更新標記：

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

總結： scope.directUpload現在是一個回調，它使用specifeid值在屬性內執行表達式。 這樣你就可以將任何東西傳遞給控制器的doSomething 。

閱讀$ compile docs以獲取詳細說明和示例。

您可能會發現有用的示例：

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>

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

如何將async數據從指令傳遞給控制器？

問題描述

2 個解決方案

解決方案1
8 已采納 2014-04-02 07:02:06

解決方案2
0 2014-04-02 06:45:12

如何將async數據從指令傳遞給控制器​​？

問題描述

2 個解決方案

解決方案1 8 已采納 2014-04-02 07:02:06

解決方案2 0 2014-04-02 06:45:12

如何將async數據從指令傳遞給控制器？

解決方案1
8 已采納 2014-04-02 07:02:06

解決方案2
0 2014-04-02 06:45:12