在工具提示中使用ng-click

Question

我正在使用Angular Bootstrap UI,我有一个工作工具提示.

HTML:

<div ng-app="helloApp">
  <div ng-controller="helloCtrl as hello"> 
    <a tooltip-trigger="click" tooltip-placement="bottom" uib-tooltip-html="<h1 ng-click='hello.clickInsideToSeeTheWorld()'>Click again!</h1>">Click me to see the tooltip</a>
  </div>
</div>

使用Javascript:

angular.module('helloApp', ['ui.bootstrap'])

.controller('helloCtrl', helloCtrl)

function helloCtrl() {
  var vm = this;

  vm.clickInsideToSeeTheWorld = function() {alert(123)}
}

当我打开工具提示时,ng-click不起作用.没有警报出现.我的控制台没有收到任何错误.这是因为HTML未编译.如何正确编译工具提示html以使其工作？

Answer 1

扩展之前的答案：当您利用角度模板缓存时，您可能可以使用 uib-tooltip-template 而不是 uib-tooltip-html。

我知道您可能不想创建外部 template.html，但您不必这样做。只需尝试：

    var app = angular.module("test", ['ui.bootstrap']);

    app.controller("testController", function($scope, $templateCache) {

      $scope.clickInsideToSeeTheWorld = function() {
            alert(123) 
      }

      if (!$templateCache.get ('template.html')) {
        $templateCache.put (
          'template.html', 
          '<a ng-click="clickInsideToSeeTheWorld()">Click again!</a>'
        );
      }

    });

和

<div ng-app="test" ng-controller="testController">
<p style="margin-top: 5em;" uib-tooltip-template="'template.html'" tooltip-popup-close-delay="3000" >
   Click me to see the tooltip
</p>

这也是一个外部插件： https://plnkr.co/edit/Asi69MQg4NfgOSI5ClFh ?p=preview