AngularJS如何从指令模板中捕获事件？答案

【问题标题】：AngularJS how to capture events from inside the directives template?AngularJS如何从指令模板中捕获事件？
【发布时间】：2015-01-16 16:24:49
【问题描述】：

我有一个指令，它的模板里面是一个<img> 元素，我想执行一个在我的指令范围内的自定义方法：

<my-directive>
    <!-- my directives template -->
    <p>...</p>
    <img onload="myScopeMethod()">
    <p>...</p>
    <!-- my directives template -->
</my-directive>

我找到了这个Get width height of remote image from url，但这只有在我将它应用到一个适用于<img> 元素的指令时才有效。

指令的目的是显示一个允许我操作图像的小部件（通过拖动滑块来缩放它），但我需要获得它的原始大小。

如何让它在我的控制器范围内执行方法？

【问题讨论】：

标签： javascript angularjs event-handling dom-events angular-directive

【解决方案1】：

您通常希望将负载处理程序函数从模板本身中取出，并将其粘贴到链接函数中。从那里开始，它取决于您的指令以及您使用的是隔离作用域、继承作用域还是与父作用域相同的作用域。

如果你的指令定义对象中有一个作用域键并且它被设置为一个对象字面量，那么你使用的是隔离作用域。在这种情况下，您需要以某种方式传递它，最直接的方法是使用 '&' 选项。

如果您没有范围键或范围键并且它设置为布尔值，则您使用的是相同的范围或继承的范围。在这种情况下，您需要做的就是调用 $scope.originalScopeMethod()，它会在作用域上调用它或在原型链中找到它。

Here's an example 具有三种不同的场景。底部的表格是从“主”控制器范围提供的，而小数字是从指令范围提供的。

如果是我，我可能会选择隔离或继承范围，这样您就可以更轻松地分别跟踪多个图像。我的示例中的共享范围版本仅适用于单个图像，但如果您确实需要，可以使其与数组或哈希一起使用。

如果我以任何方式误解了您的问题，请告诉我。

【讨论】：

嘿，感谢您的长篇回答和很好的例子。老实说，我还没有完全理解代码，我会在今天或明天尝试一下，因为我有时间这样做。我很确定它正在做我想做的事，但我还不能让它在我的项目中工作。
如果您想发布到目前为止的指令，我可能会帮助您指出正确的方向。