Friday, 5 June 2015

angularjs screen size responsive (get screen size)


Solution 1:

if you want to do that in a controller:

    var w = angular.element($window);
    w.bind('resize', function () {
        var windowWidth = $window.innerWidth
        if (windowWidth <= 800) {
            $scope.isSmallerWindow = true;
            $scope.$apply();
        }else{
            $scope.isSmallerWindow = false; 
            $scope.$apply();
        }
    });
$scope.$apply() is very necessary. Because w.bind() broken the binding links and View Model binding mechanism (if you do .net or C# you must familiar with VM) .


Solution 2:

if you want to implement it as a directive :

http://jsfiddle.net/jaredwilli/SfJ8c/






No comments:

Post a comment