0

我正在尝试使用一个函数来返回要呈现为 Angular JS ui.bootstrap 的工具提示的值。我需要这样做，以便在 ng-repeat 循环中获得正确的工具提示。如果我直接访问 html 工具提示中的值，则工具提示可以正常工作，例如tooltip="{{tooltips.rules.start}}，但如果我使用该函数tooltipHelper返回类似 的值，则工具提示无法正常工作，例如tooltip="tooltipHelper('rules', '{{fieldName}}')"，它只是将工具提示设置为字符串tooltipHelper('rules', 'start')。

相关代码：

JS

$scope.tooltips = {
            rules: {
                name: '',
                weight: 'Sorts the rules, larger values sink to the bottom',
                active: 'Enable/disable rule',
                tag: 'Select a tag from the allowed tags list. To add tags to the allowed list go to the "tags" page',
                start: 'Click to set the start time',
                end: 'Click to set the end time',
                activate: 'Click to set the activate datetime',
                expire: 'Click to set the expire datetime'
            }
        };

$scope.tooltipHelper = function(type, name){
            return $scope.tooltips[type][name];
        };

HTML/翡翠

div.required(ng-repeat="fieldName in datetime.fields", id="{{fieldName}}")
    input.form-control.datetime(type="text", value="{{fieldName}}, tooltip="tooltipHelper('rules', '{{fieldName}}')")
4

2 回答 2

0

问题是您需要将插值应用于 tooltipHelper 函数调用，这将导致双重插值标记。

通过以下方式之一解决问题：

  1. 内联函数tooltipHelper的代码：
    div.required(ng-repeat="fieldName in datetime.fields", id="{{fieldName}}")
        input.form-control.datetime(type="text", value="{{fieldName}}, tooltip="{{tooltips[type][name]}}")
  1. 移除 {{fieldname}} 的内部插值并更改 tooltipHelper 函数以从范围访问 fieldName：
    $scope.tooltipHelper = 函数（类型）{
        变量名称 = $scope.fieldName;
        返回 $scope.tooltips[类型][名称]；
    };

    div.required(ng-repeat="fieldName in datetime.fields", id="{{fieldName}}")
        input.form-control.datetime(type="text", value="{{fieldName}}, tooltip="{{tooltipHelper('rules')}}")
于 2015-04-22T05:55:29.787 回答
0

原来@umarius 的回答和一个早晨的大脑让我得到了答案：

tooltip="{{tooltipHelper('rules', fieldName)}}"

我允许在没有插值的情况下传递变量，它工作正常，然后在我得到返回值后进行插值。

于 2015-04-22T13:46:08.767 回答