在工具提示中使用单击

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 并将其更改为 $scope。

index.html

<body>

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

    app.controller("testController", function($scope) {
      $scope.clickInsideToSeeTheWorld = function() {
            alert(123)}
    });
</script>

<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>
</div>

</body>

template.html

<a ng-click="clickInsideToSeeTheWorld()">Click again!</a>

这里正在工作Plunker

Answer 2

扩展以前的答案：你可能会使用 uib-tooltip-template 代替 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

Answer 3

或者另一种解决方案是您自己编译代码，然后将其分配给工具提示 html

var sc = scope.$new( true ); //scope for html
sc.hello = {} // assign your hallo object to new scope
var compiledHtml = $compile( '<h1 ng-click="hello.clickInsideToSeeTheWorld()">Click again!</h1>')( sc );

然后你可以设置 tooltip html 为 compiledHtml.

在工具提示中使用单击

Using ng-click inside a tooltip

javascript

twitter-bootstrap

angularjs

angular-bootstrap