AngularJS指令结合多个参数的函数 [英] AngularJS directive binding a function with multiple arguments

查看:109
本文介绍了AngularJS指令结合多个参数的函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一些麻烦结合在控制器中定义在一个指令一个回调函数的函数。我的code如下所示:

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:

在我的控制器:

$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页面:

And in my html page:

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

有与code以上没有运气。从我在各种教程我明白读过我应该指定在HTML页面的参数呢?

Having no luck with the code above. From what I've read in various tutorials I understand I'm supposed to specify the arguments in the html page?

在您的帮助非常感谢!

约瑟夫。

推荐答案

有在你的code一个小小的错误,请尝试以下code,它应该为你工作。

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>

这篇关于AngularJS指令结合多个参数的函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆