ng-style working initally but not on variable update

Question

I have a strange bug/behaviour when using ng-style with a variable, where it works on whatever value is set to it initially, but when I update the variable the view doesn't update the way it should. I can find similar questions but none in the exact same situation. I have(simplified): a directive:

directives.directive('myAccordion', function{
  return {
   templateUrl: '/mytemplate.html';
   link: function($scope){
    'use-strict';
     scope.current_style '{\'max-height\':\'\'0px'}';
     scope.somefunc = function{
       isopen = !isopen;
       if(isopen){
         scope.current_style = '{\'max-height\':\'\'1000px'}';
       }else{
         scope.current_style = '{\'max-height\':\'\'0px'}'; 
     }
  };

and in the template html

etc etc
<div class="myclass" ng-style="{{current_style}}">
   <button ng-click="somefunc()"></button> 
</div>
etc

and so everything works fine including whatever I set current_style to be initially, and when showing the value of current_style it the variable does actually change to the correct text when the button is clicked and somefunc() is called, but the ng-style doesn't update and the div stays the same size. I'm not sure what I've missed here. Thanks for any help

Answer 1

You can just use the object notation of ng-style:

scope.current_style = { 'max-height': '0px' };

scope.somefunc = function() {
    isopen = !isopen;
    if(isopen){
        scope.current_style["max-height"] = '1000px';
    } else {
        scope.current_style["max-height"] = '0px';
    }
}

And in your html:

<div class="myclass" ng-style="current_style">
    <button ng-click="somefunc()"></button> 
</div>

See this jsfiddle