javascript - ng-style 最初工作但不进行变量更新

Question

在将 ng-style 与变量一起使用时，我有一个奇怪的错误/行为，它可以处理最初设置的任何值，但是当我更新变量时， View 不会按应有的方式更新。我可以找到类似的问题，但在完全相同的情况下没有。我有(简化):指令:

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'}'; 
     }
  };

在模板html中

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

因此一切正常，包括我最初将 current_style 设置为什么，当显示 current_style 的值时，当单击按钮并调用 somefunc() 时，变量实际上会更改为正确的文本，但是 ng-样式不会更新并且 div 保持相同大小。我不确定我在这里错过了什么。感谢您的帮助

Answer 1

你可以只使用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';
    }
}

在你的 html 中:

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

参见 this jsfiddle