Changes in angular controller not affecting HTML page

Question

I'm trying to show a no internet access button when my app user is not connected to the internet and the object in question is not available from the cache.

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);
}]);
})();

Whenever connectionError gets set to true nothing happens back on the HTML view. It's obviously connecting in some way because if the default value of $scope.connectionError is false then it will hide the item, and if the default is true then it will show the item, but when the value is actually changed I see no response.

Am I missing something simple?

score 1 · Accepted Answer · edited May 23 '17 at 11:56

Whenever you make changes from outside of the angular framework, e.g. from browser DOM events, setTimeout, XHR or third party libraries, you need to use $apply as per the documentation.

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

Edit:

You are doing a number of things considered bad practice, e.g. doing DOM manipulation inside your controller. I recommend you start from this answer.

Changes in angular controller not affecting HTML page

1 Answers1