Angular - 动态工具提示内容

Question

我有以下问题：我想通过执行带有参数的函数动态地为工具提示提供内容。这里的关键是param具有我需要更改工具提示内容的信息，因为此工具提示是在ng-repeat指令中。

我的HTML有点像这样：

<div class="module-box highlight clearfix" ng-repeat="request in model.requests.items track by request.id" ng-class="{ 'inactive-section': model.isLoading.value }">
    ...
        <div class="module-column text-center">
                    <h5>REQUEST STATUS</h5>
                    <p>
                        <span data-toggle="tooltip" uib-tooltip="{{request.requestStatus.name}} {{someFunction(request)}}">
                            <i class="fa fa-clock-o fa-lg {{request.requestStatusGroupCssClass}}" aria-hidden="true"></i>
                        </span>
                    </p>
                </div>
    ...
</div>

这个html视图有自己的指令homePendingRequests.js。然后我将视图插入Home.html页面（它有它的控制器）。

谢谢！！

Answer 1

我刚刚解决了它非常甜美

html指令：

<div class="module-column text-center">
    <h5>ESTADO</h5>
    <p>
        <div ng-mouseenter="tooltipHelper(request)">
            <span data-toggle="tooltip" uib-tooltip="{{msg}}">
                <i class="fa fa-clock-o fa-lg {{request.requestStatusGroupCssClass}}" aria-hidden="true"></i>
            </span>
        </div>
    </p>
</div>

js指令：

    $scope.tooltipHelper = function (request) {
        $scope.msg = request.requestStatus.name;
        if (request.validatorsForPendingStatus) {
            $scope.msg += ' (' + request.validatorsForPendingStatus.validatorsList + ')';
        }
    };

Answer 2

use $copmile(`<div class="module-box highlight clearfix" ng-repeat="request in model.requests.items track by request.id" ng-class="{ 'inactive-section': model.isLoading.value }">
    ...
        <div class="module-column text-center">
                    <h5>REQUEST STATUS</h5>
                    <p>
                        <span data-toggle="tooltip" uib-tooltip="{{request.requestStatus.name}} {{someFunction(request)}}">
                            <i class="fa fa-clock-o fa-lg {{request.requestStatusGroupCssClass}}" aria-hidden="true"></i>
                        </span>
                    </p>
                </div>
    ...
</div>`)($scope)