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

Question

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

添加工具提示的前提是，如果我们运行对文本进行分类，工具提示将提供查看整个文本的选项。

但是，我们现在希望在文本中没有省略号时仅有条件地显示工具提示。我们在<span>:

中定义了tooltip-enable属性

<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。但是，尝试从切换 showToolTip 的代码执行 apply() 会导致错误。我在更新 showToolTip 变量的代码运行时检查了 $scope.$root.$$phase 的值，阶段是 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（两个大写"T"s）

蹩脚的 Plunker 演示 ~ http://plnkr.co/edit/W7tgJmeQAJj0fmfT72PR?p=preview

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

Angular scope variable update not reflected in UI

angularjs

angular-ui-bootstrap

angularjs-digest