AngularJS directive binding a function with multiple arguments

前端未结

关注

 2  875

I\'m having some trouble binding a function defined in a controller with a callback function in a directive. My code looks like the following:

In my controller:

相关标签:

2条回答

星月不相逢

2020-12-02 11:47

There is one small mistake in your code, please try the code below and it should work for you

<!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>

0 讨论(0)

生来不讨喜

2020-12-02 11:50
Alternative method that will survive minification

Leave your html as it was:
```
<my-directive on-drop="handleDrop"></my-directive>
```
Change the call to:
```
scope.onDrop()('123','125')
```
Notice the extra opening and closing parenthesis given to onDrop. This will instantiate the function instead of injecting the function's code.

Why is it better
1. Changing the parameters' names in the handleDrop() definition (or even adding some more, if you handle it correctly) will not make you change each of the directives injections in the html. much DRYer.
2. As @TrueWill suggested, I'm almost sure the other solutions will not survive minification, while this way code stays with maximum flexibility and is name agnostic.
Another personal reason is the object syntax, which makes me write much more code:
```
functionName({xName: x, yName: y}) // (and adding the function signature in every directive call)
```
As opposed to
```
functionName()(x,y) // (zero maintenance to your html)
```
I found this great solution here.
0 讨论(0)
发布评论:

提交评论
- 加载中...