Question

我正在尝试在我的应用用户未连接到互联网时显示无互联网访问按钮，并且缓存中无法提供相关对象。

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或第三方库中，您需要根据documentation使用$ apply。

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

修改

你做了很多被认为是不好的事情，例如：在控制器内部进行DOM操作。我建议你从这个answer开始。

角度控制器的变化不会影响HTML页面

1 个答案: