AngularUI工具提示 - 使用函数返回工具提示值

时间:2015-04-22 00:37:15

标签: javascript angularjs tooltip ui.bootstrap

我正在尝试使用函数将值作为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}}')")

2 个答案:

答案 0 :(得分:0)

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

以下列方式之一解决问题:

  1. 内联函数tooltipHelper:
  2. 的代码
    
        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:
    2. 
          $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')}}")
      
      

答案 1 :(得分:0)

原来,@ umarius的回答和一个早晨的大脑引导我回答:

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

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