angularjs：单击标签以调用函数并将当前标签传递给它答案

【问题标题】：angularjs: click on a tag to invoke a function and pass the current tag to itangularjs：单击标签以调用函数并将当前标签传递给它
【发布时间】：2014-04-25 18:02:48
【问题描述】：

我需要处理对启用弹出框打开的标签的点击。

我尝试找出使用 angularjs 并自然使用 hg-click 的最佳方法。

<div ng-repeat="photo in stage.photos" 
ng-click="openPopoverImageViewer($(this))"
>

$scope.openPopoverImageViewer = function  (source) {
alert("openPopoverImageViewer "+source);
}

问题是我无法将 $(this) 传递给它。

Q1) 如何传递jQuery 元素？
Q2) 此外，ng-click 声音要求该功能成为控制器的一部分：是否可能改为在部分中调用函数？

【问题讨论】：

看起来你需要创建一个指令。 docs.angularjs.org/guide/directive.

标签： angularjs angularjs-ng-click

【解决方案1】：

你需要停止“用 jQuery 思考” :) 就像@oori 说的，你可以传入photo。或者更好的是，创建一个自定义指令。当您需要在 dom 中添加新功能时，指令是您的选择，例如您可以单击以打开叠加层的元素。例如：

app.directive('popOver', function() {
  return {
    restrict: 'AE',
    transclude: true,
    templateUrl: 'popOverTemplate.html',
    link: function (scope) {
      scope.openOverlay = function () {
        alert("Open overlay image!");
      }
    }
  };
});

然后您可以将其用作自定义元素 <pop-over> 或用作常规 HTML 元素的属性。这是一个 plunker 来演示：

http://plnkr.co/edit/P1evI7xSMGb1f7aunh3G?p=preview

更新：只是为了解释嵌入：当你说指令应该允许嵌入时（transclude:true），你说标签的内容应该被发送到指令。

所以，假设你写了<pop-over><span>This will be passed on</span></pop-over>，那么带有“这将被传递”的跨度被发送到指令，并插入到你在模板中放置ng-transclude 元素的任何位置。因此，如果您的弹出式模板看起来像这样：

<div>
    <ng-transclude/>
</div>

模板编译后生成的 DOM 将如下所示：

<div>
     <span>This will be passed on</span>
</div>

【讨论】：

你说得对，我需要停止思考 jQuery，这就是我正在尝试做的，在学习 angularjs 的过程中。我第一次将它用于实际的多平台项目需要时间。（实际上有点强调:-)）你的例子对我很有帮助。什么是嵌入？
是的，angularjs 有一点学习曲线，尤其是指令一开始可能有点难以理解。但是我发现我现在无法获得足够的角度:) 我更新了我的答案并添加了一些关于嵌入的内容。我还建议阅读这个问题的答案：stackoverflow.com/questions/14994391/…，我认为它很有帮助。
我已经实现了指令：虽然当我在模板中添加指令时效果很好，但当我通过
指令。有办法吗？
指令可以获得自己的本地范围，这可能会造成混淆。但我不完全确定你的意思，你能不能用一些细节更新你原来的问题，或者发布一个新问题？ :)
好的，我在这里创建了一个新问题，希望它更清楚stackoverflow.com/questions/23293620/…

【解决方案2】：

传递“照片”

<div ng-repeat="photo in stage.photos"  ng-click="openPopoverImageViewer(photo)">

或当前的 $index

<div ng-repeat="photo in stage.photos"  ng-click="openPopoverImageViewer($index)">

【讨论】：