如何將異步數據從指令傳遞到控制器？

我想編譯一個指令的第三方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)};

來源

2014-04-02 vzhen

順便說一句，'uploadcare.fileFrom（ '事件'，...）'已經過時，在1.0版本中刪除。你應該使用'uploadcare.fileFrom（'object'，fileEl.files [0]）'。 –

@mojo明白了...... – vzhen

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

這裏有您需要做什麼：

在指令的定義，標誌directUpload作爲一種表達：

scope: { 
    directUpload: "&" 
}

在done回調，致電：

scope.directUpload({fileInfo: fileInfo})

更新標記：

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

要summorize：scope.directUpload現在是一個回調，其內部屬性執行的表達與specifeid值。這樣你就可以將任何東西傳遞給控制器的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>

來源

2014-04-02 07:02:06

我贊同這個選項:) – shaunhusain

可以穿過對象在指令範圍內使用=在指令內做雙向數據綁定。這樣，您可以更新對象指令中的數據，並將其反映在控制器中的原始位置。在控制器中，您可以使用$ 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"; 
     } 
    } 
    } 
});

來源

2014-04-02 06:45:12 shaunhusain

如何將異步數據從指令傳遞到控制器？

回答

相關問題