javascript - 在工具提示中使用 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-模板 代替 uib-tooltip-html 当您利用 Angular 模板缓存时。

我知道您可能不想创建外部 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/Dsi69MQg4NfgOSI5ClFh?p=preview