角度控制器中不影響HTML頁面的更改

Question

當我的應用程序用戶未連接到Internet並且有問題的對象不在緩存中時，我試圖顯示沒有Internet訪問按鈕。

HTML：

<div class="VideoPlayerController video-player-controller"> 
<span class="icon-stack disconnected" ng-show="connectionError"> 
    <icon type="signal" class="signal-icon"></icon> 
    <icon type="plus" class="plus-icon icon-stack-base"></icon> 
</span> 
<video autoplay controls></video> 

JS：

(function() { 
'use strict'; 
angular.module('core-viewer') 
    .controller('VideoPlayerController', ['$scope', 'ApiService', '$routeParams', 'NavbarService', 
    function($scope, ApiService, $routeParams, NavbarService) { 
     $scope.connectionError = false; 

     $scope.videoLoaded = function(video) { 
      NavbarService.header = video.title; 
      $('.video-player-controller video').bind("error", function(event) { 
       loadFail(); 
      }); 

      $('.video-player-controller video').attr('src', video.file.downloadURL); 
     }; 

     function loadFail() { 
      if (!navigator.onLine) { 
       $scope.connectionError = true; 
      } 
     } 
     ApiService.getVideo($routeParams.uuid).then($scope.videoLoaded); 
}]); 
})(); 

每當connectionError被設置爲true，什麼都不會發生後面的HTML視圖。它顯然是以某種方式連接的，因爲如果$ scope.connectionError的默認值爲false，那麼它將隱藏該項目，如果默認值爲true，那麼它將顯示該項目，但是當實際更改值時，我看不到任何響應。

我是否缺少一些簡單的東西？

Answer 1

每當您從角框架外進行更改時，例如從瀏覽器DOM事件，setTimeout，XHR或第三方庫中，您需要使用$ apply作爲documentation。

function loadFail() { 
    if (!navigator.onLine) { 
     $scope.$apply(function() { 
      $scope.connectionError = true; 
     }); 
    } 
} 

編輯：

你正在做的認爲不好的做法了一些事情，例如在控制器內部進行DOM操作。我建議你從這個answer開始。