AngularJS / jQuery - How to append some properties of the $scope object in a jQuery event handler

Question

I got a problem. I try to append some properties of the $scope object in a jQuery event handler. Here is my code:

.controller('dashboard', ['$scope', function($scope){
    $( window ).resize(function(){
        $scope.device = ($(document).width() > 768) ? 'desktop' : 'mobile';
    });
}]);

But it seems like the device variable does not append on the $scope of the dashboard controller. What's wrong with my code? Thanks :D

score 0 · Accepted Answer · answered Nov 10 '15 at 11:18

you have to use angularjs jq lite wrapper ,also inject $window and $document and use them accordingly ,

.controller('dashboard', ['$scope','$window','$document', function($scope){
     var windowjQ = angular.element($window),
         documentjQ = angular.element($document);

    windowjQ.bind('resize',function(){
        $scope.device = (documentjQ.width() > 768) ? 'desktop' : 'mobile';
        $scope.$apply() // to kick the digest cycle;
    });
}]);

note : Try to use custom directive for any dom releated (they are meant for these kind :))

AngularJS / jQuery - How to append some properties of the $scope object in a jQuery event handler

1 Answers1