We can always write:

<span ng-bind="employee.name" uib-tooltip="employee.name+employee.age+employee.xyz"></span>

But it is always better to encapsulate this in the link function of the directive, where to process the employee into a string in the $ scope $scope.string and add the uib-tooltip="{{string}}" attribute to the source element.

  <span ng-bind="employee.name" employee-tooltip="employee"></span>

The question is how?

Not suitable answers:

  1. Through template template:<span uib-tooltip="{{string}}></span> . The attribute directive must remain an attribute.
  2. Via replace:true . We will lose all attributes of the source element and div / li / img / input will become a span.
  • We will lose all the attributes of the source element - all the attributes will remain in place, but the element itself will be replaced with the one specified in the template - Grundy

1 answer 1

In your directive, you can use the service $ compile

And also set the priority properties to a high value, so that the directive is processed first, and the terminal property to true , so that after processing this directive, others are not processed.

In the link function, you need to remove the attribute corresponding to the directive, add the necessary attributes with values, and use $compile .

based on the answer Add directives from directive in AngularJS

Example:

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function($scope, $sce) { $scope.employee = { name: "Employee", age: "20", xyz: "XYZ" } }).directive('my1', function($compile) { return { priority: 1001, terminal: true, link: function link(scope, el, attrs) { var linkFn = $compile( el.removeAttr('my1') .attr('tooltip-placement', 'right') .attr('uib-tooltip', '{{employee.name + employee.age + employee.xyz}}') ); linkFn(scope); } }; }); 
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> <script src="//angular-ui.imtqy.com/bootstrap/ui-bootstrap-tpls-2.1.4.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div ng-app="ui.bootstrap.demo" ng-controller="TooltipDemoCtrl"> <span my1 ng-bind="employee.name"> </span> </div>

  • Great, exactly what was required, thanks! - user3468806