Question

我遇到一个问题，即glyphicon类切换的三元运算符工作正常，但似乎不适用于我的自定义工具提示指令。它只保留默认Add Project，不会切换到Update Project。它显然与我的自定义指令有关。我是否需要强制$digest周期或添加$watch？我对Angular相对较新，非常感谢对此提供一些帮助。

HTML：

<span class="glyphicon glyphicon-{{ currentproject ? 'arrow-up' : 'plus'}}" 
      ng-click="PostProject(currentproject)" 
      tooltip="{{ currentproject ? 'Update' : 'Add'}} Project">
</span>

自定义指令：

app.directive('tooltip', function () {
    return {
        restrict: 'A',
        scope: {
            tooltip: '@'
        },
        link: function ($scope, element, attrs, ctrl) {
            $(element).tooltip({
                title: $scope.tooltip
            });
        }
    };
});

Answer 1

是的，您应该在工具提示中添加$watch。如果表达式的值发生变化，Angular可以神奇地调用$().tooltip()。

    link: function ($scope, element, attrs, ctrl) {
      $scope.$watch('tooltip', function(newValue) {
          updateTooltip(newValue);
          // this does'nt update the existing bs tooltip:
          // see http://stackoverflow.com/a/9875490/498298
          // $(element).tooltip({ title: newValue });
      });
    }

http://codepen.io/hansmaad/pen/QEWwdw?editors=1010

Answer 2

将所有功劳和帮助转到@hansmaad并基于this，这是最终的解决方案：

$scope.$watch('tooltip', function (newValue, oldValue) {
    $(element)
        .tooltip({
            title: newValue
        })
        .attr('data-original-title', newValue);
})

使用Bootstrap工具提示进行指令属性绑定

2 个答案: