Question

我是AngularJS的新手，让我们来看看。看看你是否可以帮助我:)。

我有一个包含活动描述的div。这个内容是用HTML编写的，所以我使用trustAsHTML：

＆＃13;

<div class="description-div">
  <div ng-bind-html="renderHtml(booking.description)">
  </div>
</div>

＆＃13;

$ rootScope功能：

＆＃13;

$rootScope.renderHtml = function (htmlCode) {
	return $sce.trustAsHtml(htmlCode);
};

＆＃13;

描述可以包含图像，所以我想检测何时点击图像，这样我就可以打开带有图像的弹出窗口。

你能帮帮我吗？我想我必须使用指令，但我尝试了它并没有起作用。

由于

Answer 1

你不想用带有辅助功能的东西来修改$ rootScope，它会变成毛茸茸的肉丸。

实现目标的一种方法是使用指令：

app.directive("myBooking",["$sce", function($sce) {
  return {
    restrict: 'E',
    scope: {
      booking: "="
    },
    template: "<div ng-click='click($event)' ng-bind-html='trustedHtml'></div>",
    link: function(scope, elem, attrs) {
      scope.trustedHtml = $sce.trustAsHtml(scope.booking.description);
      scope.click = function($event) {
        if($event.srcElement.tagName.toLowerCase() === 'img') {
           // do something if this is the image of interest...
        }
      }
    }
  };
}]);

假设预订对象是控制器的属性，在其范围内使用指令

<my-booking booking="booking"></my-booking>

上面的指令假定img点击事件会冒泡，换句话说，可信赖的HTML不会消耗img点击事件。这是展示该指令的plunkr。

angularjs trustAsHtml检测点击图片

1 个答案: