Javascript AngularJS:Add click listener，不使用ng click（用于从Json API添加的动态数据）

我正在使用Cordova、AngularJs和Ionic创建一个混合应用程序。我使用JSON API插件从Wordpress获取数据

以下是我的单一帖子视图：

<ion-view view-title="Single View">
    <ion-content>
        <div class="card single-view" ng-show="show_post">
            <div class="title" ng-bind-html="data['post'].title"></div>
            <div class="thumb">
                <img ng-src="{{data['post'].thumbnail_images['single-post-thumb'].url}}" />
            </div>
            <div class="content" ng-bind-html="data['post'].content"></div>
        </div>
    </ion-content>
</ion-view>

---

只需创建一个带有链接功能的

指令

，即可添加插件并用它装饰所有图像。大概是这样的：

<img ng-src="{{url}}" image-modal />

---

我终于找到了解决办法

我从Wordpress Api接收到的数据包含链接中的图像，如下所示：

因此，我没有直接将html内容放在ng bind html中，而是设法做了如下操作：

angular.module('starter.controllers', [])
.controller(............)
.directive( 'showData', function ( $compile ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      var el;

      attrs.$observe( 'template', function ( tpl ) {
        if ( angular.isDefined( tpl ) ) {
          el = $compile( tpl )( scope );
          element.html("");
          element.append( el );
        }
      });
    }

我将html内容保存在一个变量中，然后使用replace函数将所有href属性替换为ng click=“showImage（）”img src=

$scope.data=项目； var post_content=项目['post'].内容； $scope.content=$sce.trustAsHtml（post_content.replace（/href=/gm，'ng click=“showImage（）”img src=”）

我使用模板属性绑定了此html代码：

我使用如下指令重新编译html代码：

angular.module('starter.controllers', [])
.controller(............)
.directive( 'showData', function ( $compile ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      var el;

      attrs.$observe( 'template', function ( tpl ) {
        if ( angular.isDefined( tpl ) ) {
          el = $compile( tpl )( scope );
          element.html("");
          element.append( el );
        }
      });
    }

})； });

---

我只需要知道如何检查href是否包含图像。

您的示例jQuery也不起作用。这里哪些元素是静态的，哪些是生成的？无论哪种方式，您都应该使用一个指令来实现以下几点：（1）您在这个项目中使用jQuery吗？（2） 您是否希望Angular了解单击（例如Angular是否处理它？它是否以任何方式影响Angular的模型？）孔内容同时生成，但问题是我无法控制此div的内容：，因此，不可能在该div中的img标记上添加ng click属性。不，我不在我的项目中使用jquery。我不知道任何指令，我会检查并告诉你结果。这是添加jquery插件（和修改dom）的正确方法在angular应用程序中。但是我不认为仅仅为了一条指令就向项目中添加孔库是一种好习惯。您没有向angular添加JQuery，因为angular使用的是JQuery lite版本。您可以使用指令创建JQuery包装器。这个指令扩展了你的“html词汇表”，让你可以在元素上快速添加功能。我不能在我的img标签上添加自定义指令，因为我无法控制我的html内容。它来自json服务器

angular.module('starter.controllers', [])
.controller(............)
.directive( 'showData', function ( $compile ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {
      var el;

      attrs.$observe( 'template', function ( tpl ) {
        if ( angular.isDefined( tpl ) ) {
          el = $compile( tpl )( scope );
          element.html("");
          element.append( el );
        }
      });
    }