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

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>

谢谢，阿米查

Answer 1

你应该添加 scope.$apply 来让 angular 现在它需要触发摘要循环，然后只需调用 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);
             });
          });
       }
    }
});