角度范围变量更新没有反映在UI

我们正在研究一个HTML页面，它利用某个<span>标签上的Bootstrap工具提示。对于那些没有听说过工具提示的用户来说，这是一种弹出窗口，当它悬停在它所连接的元素上时会出现。这里是在有问题的<span>截图，并在悬停时会发生什么：角度范围变量更新没有反映在UI

前提后面添加提示的是，在我们截断文本时，工具提示将提供用于查看选项整个文本。

但是，当文本中没有省略号时，我们现在想要以条件方式显示工具提示只有。我们定义在<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(); 
}]);

基于我也做了研究，为什么到范围变量的变化不会反映在用户界面中的常见解决方案是运行$scope.$apply()，或这方面的一些变化。根据我的理解，运行apply()将告诉Angular JS执行一个摘要循环，该循环会将范围中的更改传播到UI。但是，试图从切换showToolTip的代码中执行apply()导致错误。我检查了$scope.$root.$$phase的值，同时运行更新showToolTip变量的代码，并且阶段是digest。

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

来源

2016-05-13 Tim Biegeleisen

尝试删除'{{...}}'，'即启用工具提示= “showTooltip”' 。插值是为字符串，而不是布尔值 – Phil

@Phil现在我会试试这个。事情是，在检查页面时，我看到'tooltip-enabled =“false”'。 –

是的，但是字符串'“false”'是* truthy * – Phil

有两件事情需要固定...

不要使用字符串插值的布尔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

来源

2016-05-13 05:25:40 Phil

角度范围变量更新没有反映在UI

回答

相关问题