ng-click 不会在已编译的模板内触发

Posted 2023-05-09

【中文标题】ng-click 不会在已编译的模板内触发

【英文标题】：ng-click does not fired inside compiled template

【发布时间】：2015-03-22 15:54:07

【问题描述】：

我正在尝试使用带有 angularjs 和 twitter 引导程序的自定义 html 创建一个弹出框。由于此功能尚未在 angular-ui 中实现，我正在尝试在 angular 指令中使用引导方法。

所以我创建了包含此类代码的指令：

link: function(scope, element, attrs) 
  var templateData = 
    "<button class='btn btn-default btn-sm cancel' ng-click='closePopover($event)'>Cancel</button>";

  var compliedData = $compile(templateData)(scope);
  angular.element(element).find('a')
    .popover(html: true,
              content: compliedData)
    .on('click', function(e) 
      e.preventDefault();
      return true;
    );

我遇到的问题是模板已正确添加到页面中，并且弹出框效果很好。但是编译模板中的ng-click 方法根本没有触发。

我做错了什么，我该如何做对？

【问题讨论】：

为我们提供 jsfiddle。

你有scope.closePopover函数吗？

@DanielDarabos 是的。我已经从父范围传递了它，甚至在隔离范围内创建了新函数。即使我只是发出警报，ng-click 也不会触发：ng-click='alert("test!")'。

nope.code 没有 scope.closePopover 功能。丹尼尔是正确的。放那个函数。

看起来很像***.com/questions/21205250/…

【参考方案1】：

$.popover 对您在content 配置属性中提供的 HTML 进行复制。不复制事件绑定。除了直接停止使用 bootstrap 的 $.popover 并开始使用 bootstrap-ui 或类似的东西外，别无他法。

【讨论】：

看起来很有道理，但在上面的 cmets 中，我有这个链接：plnkr.co/edit/4uqGPvX1RNgDqKaSRz8l?p=preview(from 这里：***.com/questions/21205250/…)。好像有效，不是吗？

看起来很奇怪，我 100% 确定我以前尝试过，情况就是这样。刚刚试了一下，效果很好：jsfiddle.net/cqf7koyn

我想说有些地方发生了变化，最新版本修复了这个问题。

【参考方案2】：

它位于UI Bootstrap。它是 Angular UI 的一个子集

有关详细信息，在 UI 引导程序中，popover 使用 $tooltip 提供程序。

因此您可以毫无问题地使用自定义 html。这正是 popover 所做的。

这是工作的plunker

你需要有以下2条指令

 .directive('xngPopover', ['$tooltip',
function($tooltip) 
  return $tooltip('xngPopover', 'popover', 'click');

]) .directive('xngPopoverPopup', [

function() 
  return 
    replace: true,
    scope: 
      title: '@',
      content: '@',
      animation: '@',
      isOpen: '='
    ,
    templateUrl: 'tmp.html',
    controller: function($scope) 
      $scope.Hide = function() 
        $scope.isOpen = false;
      ;
    
  ;

]);

触发器是这样的

 <span class='btn btn-success' xng-popover='test' popover-placement="bottom">test</span>

【讨论】：

AFAIK 他们没有为弹出框实现自定义 html。此错误仍然有效（2 年）：github.com/angular-ui/bootstrap/pull/1848

是的，你可以。 Popover 是使用 $tooltip 来实现的。你绝对可以做到这一点。我的项目中有这个。

哇！我该怎么做？我应该使用哪个属性来添加带有事件绑定的自定义 html？也许你可以给我看一些代码？

给你！我认为使用 Bootstrap UI 是一个更好的解决方案。 plnkr.co/edit/er8QHdJAsZzZWI2jGcW0?p=preview

在您的答案中包含该 plnkr 链接的内容将有助于该答案退出低质量帖子队列。