Question

我需要处理一个能够打开弹出窗口的标签。

我尝试找出使用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）此外，还有敲击声音要求功能是控制器的一部分：是否可能调用部分中的函数而不是？

Answer 1

传递“照片”

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

或当前的$ index

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

Answer 2

你需要停止思考jQuery＆＃34; :) 就像@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>，然后用＆＃34;这将传递＆＃34;发送到指令，并插入模板中ng-transclude元素的任何位置。因此，如果您的弹出模板看起来像这样：

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

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

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

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

2 个答案: