AngularJS指令綁定具有多個參數的函數

我在綁定在控制器中使用指令中的回調函數定義的函數時遇到了一些問題。我的代碼如下所示：AngularJS指令綁定具有多個參數的函數

在我的控制器：

$scope.handleDrop = function (elementId, file) { 
    console.log('handleDrop called'); 
}

然後我的指令：

.directive('myDirective', function() { 
    return { 
     scope: { 
     onDrop: '&' 
     }, 
     link: function(scope, elem, attrs) { 
     var myFile, elemId = [...] 

     scope.onDrop(elemId, myFile); 
     } 
    });

在我的html頁面：

<my-directive on-drop="handleDrop"></my-directive>

有沒有運氣上面的代碼。從我在各種教程中閱讀的內容中瞭解到，我應該在HTML頁面中指定參數？

來源

2013-09-24 Joseph Paterson

。在你的代碼，一個小小的錯誤，請嘗試下面的代碼，它應該爲將生存縮小你

<!doctype html> 
<html ng-app="test"> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script> 

    </head> 
<body ng-controller="test" >  


<!-- tabs --> 
<div my-directive on-drop="handleDrop(elementId,file)"></div> 

<script> 
    var app = angular.module('test', []); 

    app.directive('myDirective', function() { 
     return { 
      scope: { 
       onDrop: '&' 
      }, 
      link: function (scope, elem, attrs) { 
       var elementId = 123; 
       var file = 124; 
       scope.onDrop({elementId:'123',file:'125'}); 

      } 
     } 
    }); 

    app.controller('test', function ($scope) { 
     alert("inside test"); 
     $scope.handleDrop = function (elementId, file) { 
      alert(file); 
     } 
    }); 

    </script> 
</body> 


</html>

來源

2013-09-24 06:01:07

Angular文檔中定義了哪種行爲？ –

似乎沒有要在文檔實際的話題，但話題是指令的邏輯函數，http://docs.angularjs.org/guide/directive – tommybananas

顯然，參數名稱必須標記完全匹配;我想知道這是否會存在縮小？ – TrueWill

100

替代方法工作

離開你的HTML，因爲它是：

<my-directive on-drop="handleDrop"></my-directive>

變化調用：

scope.onDrop()('123','125')

注意給予onDrop額外的開啓和關閉括號。這將實例化該函數，而不是注入該函數的代碼。

爲什麼更好

改變在handleDrop參數的名字（）的定義（或者甚至增加更多一些，如果你正確地處理它）不會讓你改變每個指令在html中注射。多DRYer。
@TrueWill建議，我幾乎可以肯定，其他解決方案將不會存在縮小，而這種方式的代碼保持最大的靈活性，並與名稱無關。

其他個人原因是對象語法，這讓我寫更多的代碼：

functionName({xName: x, yName: y})

（並在每一個指令調用添加函數簽名）

爲反對

functionName()(x,y)

（零維護到你的html）

我發現這個很棒的解決方案here。

希望有幫助！

來源

2014-10-07 20:22:35 nurinur

這個工作對我好，但我不得不使用對象符號的問題。在Typescript中顯式使用類。 [此評論]（http://stackoverflow.com/questions/38777903/invoking-function-breaks-scope?noredirect=1#comment64927293_38777903）幫我解決這個問題。 –

AngularJS指令綁定具有多個參數的函數

回答

相關問題