Question

我们正在开发一个HTML页面，该页面使用某个<span>标记上的Bootstrap工具提示。对于那些没有听说过工具提示的人来说，当它悬停在它所附着的元素上时，它会出现一种弹出窗口。以下是显示问题<span>的屏幕截图，以及悬停时发生的情况：

添加工具提示背后的前提是，如果我们截断文本，工具提示将提供查看整个文本的选项。

但是，我们现在希望在文本中没有省略号的情况下，只允许显示工具提示。我们在tooltip-enable：

中定义了<span>属性

<span uib-tooltip="{{someName}}" tooltip-placement="right" tooltip-enable="{{showToolTip}}">{{someNameShortened}}</span>

这里的关键是tooltip-enable="{{showToolTip}}"，它将属性绑定到此页面的控制器中的范围变量。这是相关的（和缩写的）控制器代码：

mainApp.controller('repoListController',['$scope', '$rootScope', ...,
function($scope,$rootScope, ...) {

    $scope.showToolTip = false;

    var repositoryList= function(){
        repositoryService.getRepositoryList(function(data) {
            var repoList = data;                
            repoList.shortenedDisplayName = repositoryService.getShortRepoName(repoList.repoName, DISPLAY_NAME_MAX_LENGTH);
            // if the repository's name be sufficiently large (i.e. it has an ellipsis)
            // then show the tooltip.  Otherwise, the default value is false (see above)
            if (repoList.repoName.length > DISPLAY_NAME_MAX_LENGTH) {
                $scope.showTooltip = true;
            }
        });
    }

    repositoryList();
}]);

根据我所做的研究，在UI中没有反映为什么更改范围变量的常见解决方案是运行$scope.$apply()，或者对此进行一些修改。据我所知，运行apply()将告诉Angular JS执行摘要循环，这会将范围中的更改传播到UI。但是，尝试从切换apply()的代码中执行showToolTip会导致错误。我在运行更新$scope.$root.$$phase变量的代码时检查了showToolTip的值，并且阶段为digest。

所以现在我无法解释这一点。如果代码已经在摘要中，为什么更改不会反映在UI中？此外，如果代码已经在摘要中，那么我如何强制Angular将更改同步到UI？

Answer 1

需要修理两件事......

不要使用字符串插值作为布尔值showToolTip

<span uib-tooltip="{{someName}}" tooltip-placement="right" 
      tooltip-enable="showToolTip">{{someNameShortened}}</span>

JavaScript变量/属性区分大小写。在getRepositoryList处理程序中，您有$scope.showTooltip。它应该是$scope.showToolTip（两个首都＆＃34; T＆＃34; s）

Crappy Plunker演示〜http://plnkr.co/edit/W7tgJmeQAJj0fmfT72PR?p=preview

角度范围变量更新未反映在UI中

1 个答案: