AngularUI 工具提示 - 使用函数 return 工具提示值
AngularUI Tooltips - use function to return tooltip value
我正在尝试使用函数 return 将值呈现为 Angular JS ui.bootstrap 的工具提示。我需要这样做,这样我才能在 ng-repeat 循环中获得正确的工具提示。如果我直接访问 html 工具提示中的值,例如 tooltip="{{tooltips.rules.start}}
,工具提示工作正常,但如果我使用函数 tooltipHelper
到 return 一个值,例如 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/Jade
div.required(ng-repeat="fieldName in datetime.fields", id="{{fieldName}}")
input.form-control.datetime(type="text", value="{{fieldName}}, tooltip="tooltipHelper('rules', '{{fieldName}}')")
问题是您需要将插值应用于 tooltipHelper 函数调用,这将导致双重插值标记。
通过以下方式之一解决问题:
- 内联函数tooltipHelper的代码:
div.required(ng-repeat="fieldName in datetime.fields", id="{{fieldName}}")
input.form-control.datetime(type="text", value="{{fieldName}}, tooltip="{{tooltips[type][name]}}")
- 删除 {{fieldname}} 的内部插值并更改 tooltipHelper 函数以从范围访问 fieldName:
$scope.tooltipHelper = function(type){
var name = $scope.fieldName;
return $scope.tooltips[type][name];
};
div.required(ng-repeat="fieldName in datetime.fields", id="{{fieldName}}")
input.form-control.datetime(type="text", value="{{fieldName}}, tooltip="{{tooltipHelper('rules')}}")
原来@umarius 的回答和早上的大脑让我找到了答案:
tooltip="{{tooltipHelper('rules', fieldName)}}"
我允许变量在没有插值的情况下传递,它工作正常,然后在我得到 return 值后进行插值。
我正在尝试使用函数 return 将值呈现为 Angular JS ui.bootstrap 的工具提示。我需要这样做,这样我才能在 ng-repeat 循环中获得正确的工具提示。如果我直接访问 html 工具提示中的值,例如 tooltip="{{tooltips.rules.start}}
,工具提示工作正常,但如果我使用函数 tooltipHelper
到 return 一个值,例如 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/Jade
div.required(ng-repeat="fieldName in datetime.fields", id="{{fieldName}}")
input.form-control.datetime(type="text", value="{{fieldName}}, tooltip="tooltipHelper('rules', '{{fieldName}}')")
问题是您需要将插值应用于 tooltipHelper 函数调用,这将导致双重插值标记。
通过以下方式之一解决问题:
- 内联函数tooltipHelper的代码:
div.required(ng-repeat="fieldName in datetime.fields", id="{{fieldName}}") input.form-control.datetime(type="text", value="{{fieldName}}, tooltip="{{tooltips[type][name]}}")
- 删除 {{fieldname}} 的内部插值并更改 tooltipHelper 函数以从范围访问 fieldName:
$scope.tooltipHelper = function(type){ var name = $scope.fieldName; return $scope.tooltips[type][name]; }; div.required(ng-repeat="fieldName in datetime.fields", id="{{fieldName}}") input.form-control.datetime(type="text", value="{{fieldName}}, tooltip="{{tooltipHelper('rules')}}")
原来@umarius 的回答和早上的大脑让我找到了答案:
tooltip="{{tooltipHelper('rules', fieldName)}}"
我允许变量在没有插值的情况下传递,它工作正常,然后在我得到 return 值后进行插值。