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

Question

我有一个指令，它的模板中有一个 <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> 元素上工作的指令时才有效。

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

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

Answer 1

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

如果您的指令定义对象中有范围键，并且它被设置为对象文字，那么您正在使用隔离范围。在这种情况下，您需要以某种方式传递它，最直接的方法是使用“&”选项。

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

Here's an example 三个不同的场景。底部的 table 来自 'main' 控制器作用域，而较小的数字来自指令作用域。

如果是我，我可能会选择隔离或继承范围，这样您就可以更轻松地分别跟踪多个图像。我的示例中的共享范围版本仅适用于单个图像，但如果你真的需要，你可以让它使用数组或散列。

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

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

AngularJS how to capture events from inside the directives template?

javascript

event-handling

dom-events

angularjs

angular-directive