将动态数据应用于标题属性的替代方法答案

【问题标题】：Alternative way to apply dynamic data to title attribute将动态数据应用于标题属性的替代方法
【发布时间】：2016-09-06 09:08:54
【问题描述】：

我正在尝试将动态数据设置为标签标签的标题。我使用了 lodash 中的 capitalize 属性并应用了类似 <label title="{{caption}} {{optVal.charAt(0).toUpperCase()+optVal.slice(1)}}">{{optVal}}</label> 的东西。我意识到 DOM 对象上发生了太多的计算，这是不好的做法，后来我尝试将它传递给一个可以返回所需结果的函数.我仍在寻找更好的解决方案来减少开销，有人可以帮我解决这个问题。

http://jsbin.com/cexonihaki/edit?html,js,output

【问题讨论】：

为什么不用css大写。 CSS 属性 text-transform: 大写;
是的@joashp 是对的，你可以使用css，看看这个stackoverflow.com/questions/30207272/…
他不能只大写一个字母，而用 text-transform 保留另一个单词
joashp@ 我不能使用 css capitalize 属性，因为我只对标题应用更改而不在其他任何地方显示它，另一个选项是应用过滤器。
Shubham Takode@您的建议实际上给了我一个解决方案，我仍然不确定它是否是理想的解决方案，但仍然感谢您的参考:)

标签： html angularjs lodash

【解决方案1】：

你可以使用$timeout()函数或scope.$digest();

这里是角度doc。摘要

这就是documentation 之间的区别

【讨论】：

为什么要使用 $timeout 或 $digest ？ timeout 用于延迟通话。也许你想说 $apply。反正我觉得她俩都没用
哦，是的，我正在考虑 $scope.$apply 的替代方法。

【解决方案2】：

您可以在您的范围内创建一个函数来创建标题并在视图中使用它（或使用 CSS 作为其他提及它，但它会将所有标题大写，而不仅仅是一个字母）

我克隆了你的 jsbin，http://jsbin.com/vutuwibube/1/edit?html,js,output 它立即运行

 <label ng-attr-title="{{creatTitle()}}">{{optVal}}</label>

控制器端：

 $scope.creatTitle = function( ){
      return $scope.caption + " " + $scope.optVal.charAt(0).toUpperCase()+ $scope.optVal.slice(1);
 }

【讨论】：

AlainIb@ 我也试过这个，但仍在寻找更好的解决方案
我试过 ;) 你有三个可能性。 1）像你一样在视图中执行 concat，2）像我一样在控制器中执行 concat 3）使用 CSS，但不能只将字母大写