I am having a very troubling problem where ng-click updates the expected scope variables, the scope variables appear to change on the DOM ( when viewed via the chrome debugger) but the dom elements that have changed are not redrawn in the browser. I have noticed across multiple browsers and devices BUT ONLY WHEN THE SCREEN WIDTH IS BELOW 768. I am using angular version 1.2.6. Has anyone come across this type of issue??
I have simplified the code to try to isolate and confirm what is happening. Here is the code in its simplified version:
First the 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 point...
'use strict';
(function () {
var groupController = function($scope) {
$scope.usergroup={};
$scope.usergroup.collapsed=true;
};
myOverall.myApp.controller('GroupController',['$scope', groupController]);
}());
The controller is invoked by 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); */
}]);
Add this function in your controller
$scope.toggleUserGroup = function(){
$scope.usergroup.collapsed = ! $scope.usergroup.collapsed;
$scope.$apply();
}
Call this function on ng-click. This should get the DOM updated and refreshed.
Reasoning: By calling $apply() you trigger a digest() cycle, which checks for changed expression and repaints the DOM if need be.
Incase this doesn't fix the issue, please provide a plunkr/fiddle. Would be happy to get some working code.
Thanks,
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With