Question

我正在尝试在popover中创建一个选择器，我想通过调用不同的函数来收集事件，但是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

Answer 1

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

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

根据文件：

uib-popover-html - 采用一个评估为HTML的表达式串。请注意，此HTML未编译。如果编译是必需的，请使用uib-popover-template属性选项代替。用户有责任确保内容的安全加入DOM！

Answer 2

我认为我们应该只创建picker指令而不需要bindHtmlCompile

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

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

$ sce.trustAsHtml中的ng-click（）对uib-popover-html不起作用

2 个答案: