角度範圍變量更新沒有反映在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

回答

相關問題