将对象传递给自定义角度bootstrap ui工具提示

Im trying to pass and object to a custom angular-ui bootstrap tooltip component.

我试图传递和反对自定义angular-ui bootstrap工具提示组件。

My code so far is a new directive:

到目前为止,我的代码是一个新指令:

angular.module('ui.bootstrap.korv', [ 'ui.bootstrap.tooltip' ])
.directive('korvPopup', function () {
    return {
        restrict: 'EA',
        replace: true,
        scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', species: '='},
        templateUrl: 'korv.html'
    };
})
.directive('korv', [ '$tooltip', function ($tooltip) {
    return  $tooltip('korv', 'korv', 'click');
}]);

and the the template:

和模板:

<script type="text/ng-template" id="korv.html">
<div class="tooltip {{ placement }}" ng-class="{ in: isOpen(), fade: animation() }">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">obj is {{content}} obj.a is {{content.a}}</div>
</div>

and in the view:

并在视图中:

<li korv="{a:1234}">

outputs:

obj is {a:1234} obj.a is

obj是{a:1234} obj.a是

So the object I pass converts to a json string and I can not access its fields. Using tooltipHtmlUnsafe is not an option here.

所以我传递的对象转换为json字符串,我无法访问其字段。在这里使用tooltipHtmlUnsafe不是一个选项。

I tried changing content: '@' to content: '=' but that doesn't work.

我尝试更改内容:'@'到内容:'='但这不起作用。

So how can I pass an object to tooltip?

那么如何将对象传递给工具提示呢?

1 个解决方案

#1

This is not possible due to the implementation of angular bootstrap ui tooltip. My solution was to create a new directive:

由于角度bootstrap ui工具提示的实现,这是不可能的。我的解决方案是创建一个新指令:

angular.module('app').directive('speciesInfo', function ($log, $timeout) {
    return {
        restrict: 'A', // only activate on element attribute
        scope: {
            species: "=speciesInfo"
        },
        link: function (scope, elem, attrs) {
             var showPromise;
             elem.on('mouseenter', function () {
             showPromise = $timeout(function () {
                 elem.children('.popover').show();
             }, 500);
             });
             elem.on('mouseleave', function () {
                 $timeout.cancel(showPromise);
                 elem.children('.popover').hide();
             });
        },
        templateUrl: 'species-info.html'

    }
});

now it is easy to style the tooltip:

现在很容易设计工具提示的样式:

<div class="popover right in fade">
<div class="arrow"></div>
<div class="popover-inner">
    <div class="popover-title text-center">
        {{species.vernacularName}} <img class="small-species" ng-src="{{species.iconFileName}}"/>
    </div>

    <div class="popover-content">
        <em> {{species.scientificName}}</em>
    </div>
</div>

#1