$sce.trustAsHtml 中的 ng-click() 不适用于 uib-popover-html答案

【问题标题】：ng-click() in $sce.trustAsHtml doesn't work for uib-popover-html$sce.trustAsHtml 中的 ng-click() 不适用于 uib-popover-html
【发布时间】：2016-05-26 15:28:56
【问题描述】：

我正在尝试在弹出窗口中创建一个选择器，并且我想通过调用不同的函数来收集事件，但是 ng-click 指令不起作用。我阅读了 $ compiles 指令，但它对我不起作用，因为我不能同时使用这两个指令。

我的html：

<button uib-popover-html="htmlPopover" class="btn btn-default">HTML Popover</button>

我的Ctrl：

$scope.htmlPopover = $sce.trustAsHtml('<div class="picker">' +
    '<div class="picker-items">' +
    '<div class="picker-item" title=".fa-github"><i class="fa fa-github"></i></div>' +
    '<div class="picker-item picker-selected label label-success" title=".fa-heart">' +
    '<i class="fa fa-heart"></i></div><div class="picker-item" title=".fa-html5">' +
    '<i class="fa fa-html5"></i></div><div class="picker-item" title=".fa-css3">' +
  '<a ng-click=\"buttonClick()\"><i class="fa fa-css3"></i></a>' +
    '</div></div></div>');


$scope.buttonClick  = function(){
  console.log("Well");

};

我的指令：

.directive('bindHtmlCompile', ['$compile', function ($compile) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        scope.$watch(function () {
          return scope.$eval(attrs.bindHtmlCompile);
        }, function (value) {
          // In case value is a TrustedValueHolderType, sometimes it
          // needs to be explicitly called into a string in order to
          // get the HTML string.
          element.html(value && value.toString());
          // If scope is provided use it, otherwise use parent scope
          var compileScope = scope;
          if (attrs.bindHtmlScope) {
            compileScope = scope.$eval(attrs.bindHtmlScope);
          }
          $compile(element.contents())(compileScope);
        });
      }
    };
  }]);

有人可以帮忙吗？

谢谢;P

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

我猜你需要使用模板而不是 html。

尝试uib-popover-template 而不是uib-popover-html。

根据文档：

uib-popover-html - 采用计算结果为 HTML 的表达式细绳。请注意，此 HTML 未编译。如果编译是必需，请使用 uib-popover-template 属性选项反而。用户有责任确保内容安全放入 DOM！

【讨论】：

是的，你是对的，要在 uib-popover 中绑定点击，你必须使用模板。谢谢。

【解决方案2】：

我认为我们应该只创建选择器指令，不需要 bindHtmlCompile

.directive('picker', ['$compile', function($compile){
    return { 
      template: 'your picker template',
      link: function (scope, element, attrs) {
          $compile(element.contents())(scope);
      }
     }
    }]

或者更好的是我们不需要使用编译。使用 buttonClick 作为指令函数参数

【讨论】：

这是个好主意，但默认指令有效，我更喜欢使用它。非常感谢你。 ;D