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-提示模板代替 UIB-提示，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/Dsi69MQg4NfgOSI5ClFh?p=preview

Answer 2

我添加了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 3

或者替代解决方案是您自己编译代码然后将其分配给tooltip 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。

在工具提示中使用ng-click

3 个答案: