Geek Answers Handbook

Angularjs DOM is updated, but the screen does not redraw. Not sure where to go from here

I had a very disturbing problem when ng-click updates the expected scope variables, the scope variables change in the DOM (when viewed through the chrome debugger), but the dom elements that were changed do not redraw in the browser, I noticed in several browsers and devices, BUT ONLY WHEN THE SCREEN WIDTH IS BELOW 768. I am using angular version 1.2.6. Has anyone encountered this type of problem?

I simplified the code to try to isolate and confirm what was going on. Here is the code in its simplified version:

First view:

<section class="stream-area"> <div class="group"> <div class="gw-fixed-top-panel"> <div class="group-heading "> <div class="panel-title"> <span class="fleft name" ng-click="usergroup.collapsed=!usergroup.collapsed"> CLICK HERE </span> <a ng-show="usergroup.collapsed" title="Click to edit group" ><i class="fa fa-cog"></i></a> <a ng-hide="usergroup.collapsed" title="Click to edit group" ><i class="fa fa-chevron-up"></i></a> <div> {{usergroup.collapsed}}</div> </div> </div> </div> </div> </section>

The controller does nothing at this moment ...

 'use strict'; (function () { var groupController = function($scope) { $scope.usergroup={}; $scope.usergroup.collapsed=true; }; myOverall.myApp.controller('GroupController',['$scope', groupController]); }());

The controller is called via .config: (function () {golfWire.gwWebApp = angular.module ('gwWebApp', ['NgRoute', 'NgAnimate', 'NgResource', 'Ui.bootstrap', 'Firebase', 'LocalStorageModule', 'NgGrid']);

 myOverall.myApp .config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) { $routeProvider .when('/group/view', { controller: 'GroupController', templateUrl: '/app/views/group.html' }) .otherwise({ redirectTo: '/main' }); /* $locationProvider.html5Mode(true); */ }]);
+6
source share
2 answers

Add this function to the controller

 $scope.toggleUserGroup = function(){ $scope.usergroup.collapsed = ! $scope.usergroup.collapsed; $scope.$apply(); }

Call this function on ng-click. This should update and update the DOM.

Reason: By calling $ apply (), you run the digest () loop, which checks the modified expression and replicates the DOM, if necessary.

If this does not fix the problem, please indicate plunkr / fiddle. I would be glad to get some working code.

Thanks,

+1
source

A slight variation on Eliel's answer in AngularJS - binding to directive size worked for me. In the .js directive:

  $scope.onResizeFunction = function() { }; // Call to the function when the page is first loaded $scope.onResizeFunction(); angular.element($(window)).bind('resize', function() { $scope.onResizeFunction(); $scope.$apply(); });

I'm calling

  $(window).resize();

from my application. The d3 directive will now resize to fill the container.

0
source

More articles:


All Articles