Problems with uib-tooltip-html Angularjs

Asked

Viewed 226 times

0

I’m having a problem returning a value using the angular-ui-bootstrap. I have a function to return the result of each tooltip dynamically in a table the problem is that whenever I return the $sce.trustAshtml of a function it simply doesn’t work.

<head lang="en">
    
    <title>uib-tooltip-html test</title>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>

    <script>
        var app = angular.module("test", ['ui.bootstrap']).config(function($sceProvider) {
            $sceProvider.enabled(false);
        });

        app.controller("testController", function($scope, $http, $interval, $sce) {
          $scope.text = $sce.trustAsHtml('<div>Some text</div>');          
          $scope.text1 = function teste(){
          	var text = $sce.trustAsHtml('<div>Some text</div>');
          	return text;
          };
        });
    </script>

</head>
<body>

<div ng-app="test" ng-controller="testController">

    <p style="margin-top: 5em;" uib-tooltip-html="text" >
        A Thing With an HTML Tooltip
    </p>

    <p style="margin-top: 5em;" uib-tooltip-html="text1" >
        A Thing With an HTML Tooltip
    </p>
    
    <p style="margin-top: 5em;" uib-tooltip="text1" >
        A Thing With a Tooltip without html
    </p>

</div>

angularjs tooltip

  • Have you tried that: uib-tooltip-html="text1()" ?

  • I’m using more get error "Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

  • I edited this example that you posted and it worked, is not forgetting anything?

  • The problem was my config that as it was in separate documents it did not set $sceProvider, so it worked on jsFiddle and the system did not work

1 answer

0


The problem was the . config that was not working and setting $sce.Provider and was changed

of 

(function () {
'use strict';

angular
    .module("taskList")
    .config(function ($sceProvider) {
        $sceProvider.enabled(false);
    });
});

To

'use strict';

angular
.module("taskList")
.config(TaskListConfig);

TaskListConfig.$inject = ["$sceProvider"];

function TaskListConfig($sceProvider)
{
    $sceProvider.enabled(false);
};

Browser other questions tagged angularjs tooltip

You are not signed in. Login or sign up in order to post.