Question

我正在尝试使用如here所述的angular指令将angular函数绑定到常规js事件（logedIn事件）。

指令代码是：

evApp.directive('onlogin', function () {
return {
    restrict: 'A',
    transclude: true,
    scope: {
        'onlogin': '&'
    },
    link:function (scope, element, attr) {
        //Code to detect when element is pulled goes here
        document.addEventListener("logedIn", function (e) {
            scope.$eval(attr.onlogin);
        });
    }
}
});

html标签是：

<div  onlogin="loggedIn()"></div>

它工作但我没有找到一种方法来传递链接函数中带有事件的参数'e'。我试图从html传递函数处理程序，并使用链接函数中的参数调用函数，但它没有工作。有点像：

<div  onlogin="loggedIn"></div>

谢谢，Amichai

Answer 1

你应该添加范围。$ apply to let现在它需要触发摘要周期然后只调用scope.onlogin（{e：e}）基本上你可以在处理程序中使用它，就像你使用$ event一样。

 evApp.directive('onlogin', function () {
return {
    restrict: 'A',
    transclude: true,
    scope: {
        'onlogin': '&'
    },
    link:function (scope, element, attr) {
        //Code to detect when element is pulled goes here
        document.addEventListener("logedIn", function (e) {
            scope.$apply(function () {
             scope.onlogin({e: e})
            });
        });
    }
}
});

Answer 2

对onlogin函数的调用需要在匿名函数内部才能添加参数，但该函数需要存储在匿名函数之外，否则不会触发。

evApp.directive('onlogin', function () {
    return {
       restrict: 'A',
       transclude: true,
       scope: {
         'onlogin': '&'
       },
       link:function (scope, element, attr) {
          //Code to detect when element is pulled goes here
          document.addEventListener("logedIn", function (e) {
             var fn = scope.onlogin();
             scope.$apply(function () {
                  fn(e);
             });
          });
       }
    }
});

将常规自定义js事件绑定到角度控制器函数

2 个答案: