为什么AngularJS中没有数据标题属性更新？

Question

我正在使用AngularJS和Bootstrap的popover。我可以成功绑定到data-content但不能绑定到data-title：

<li data-trigger="hover" data-placement="bottom" data-title="{{'Memory limit' | l10n}}" data-content="{{'Memory available for the execution of one testcase, measured in MiB.' | l10n}}">
  <a><i class="fa fa-stack-overflow fa-lg"></i> {{task.memory_limit}} MiB</a>
</li>

此代码产生：

从开发工具中，我可以看到data-title="Limite di memoria"所以它有效，所以我真的不明白它为什么不更新到实际视图。另外，从dev-tools我可以看到有两个空的新属性我不知道（data-original-title和title）。

Answer 1

这是因为每当Bootstrap Popover JavaScript执行时都会读取该属性，这是Angular更新绑定之前的。

如果您想使用该功能，您将要么必须滚动自己的指令，要么找到一个。 Angular-UI有一个你可以使用的Popover实现。

Answer 2

我有

data-toggle="tooltip" data-placement="left" data-title="'global.passwrules' | translate : {passwlen : user.user.passwLen}"

但在从数据库中读取data-title之前评估user.user.passwLen。所以我重写了tooltip.js并添加了timeout。

旧 tooltip.js

directivesModule
.directive('toggle', function($timeout){
  return {
    link: function(scope, element, attrs){
      if (attrs.toggle=="tooltip"){
          $timeout(function() {
              $(element).attr( 'title', scope.$eval(attrs.title));
              $(element).tooltip();
          },0);
      }
      if (attrs.toggle=="popover"){
          $(element).popover();
      }
    }
  };
});

到我的 tooltip.js

directivesModule
.directive('toggle', function(){
  return {
    link: function(scope, element, attrs){
      if (attrs.toggle=="tooltip"){
         $(element).attr( 'title', scope.$eval(attrs.title));
         $(element).tooltip();
      }
      if (attrs.toggle=="popover"){
        $(element).popover();
      }
    }
  };
});