Wednesday, February 17, 2016

angular hacks: don't render component until needed variables are initialized

At work I'm working on parts of a large Angular infrastructure. 

I was using a pre-existing table component (with built-in checkbox select row behaviors) but the variable I told it to put stuff in ($scope.selectedItems) wasn't available as the thing was being rendered, and the component was silently disabling the selecting functionality (including the select all feature, which was the most visible form of the problem.)

My first way of fixing it was to just put the $scope.selectedItems = []; directly in the top level function of the controller itself, rather than in the init() function that had been trying to set it before. If I wanted to keep that code in init, though, I could set a flag -- like have the end of init() be 
$scope.initialized = true; 
then on the component do a 
ng-if="initialized" 
which forces it to delay rendering until things are ready to go. (Setting the initialized tag is expected to be a one time thing, and should never be later set to false, obviously.)

No comments:

Post a Comment