Call jQuery function when also using Angular

Question

In my jQuery's document ready, I have something like

function resize() {
    textChatSection.css("width", $(window).width() - $('.user-list').width());
}

In the DOM, I have something like

<div id="users" ng-repeat="user in users" ng-controller="userController">
    <img src="test.png"/>
</div>

In another JS controllers file, I have a userController. The $scope.users array is empty on page load, but later on can have data, so the div is not being shown.

However when it's being shown, I need to run the resize() function. I tried making the function global (by assigning to a variable without the var infront) but it also fails. What's a good way to handle this?

Thanks

Andy Gaskell · Accepted Answer · 2014-07-30 19:09:32Z

1

Try $viewContentLoaded. In your controller:

$scope.$watch('$viewContentLoaded', resize);

Eventually you probably want to do this in a directive. You want to avoid DOM manipulation in your controller.

answered Jul 30, 2014 at 19:09

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3692927 Over a year ago

I've tried making the resize function global, by assigning it to a variable without the var keyword, but I still get the error that resize is undefined, most likely because it's inside document.ready.

Collectives™ on Stack Overflow

Call jQuery function when also using Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related