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

Question

在将 ng-style 与变量一起使用时，我有一个奇怪的 bug/behaviour，它可以处理最初设置的任何值，但是当我更新变量时，视图不会更新它的方式应该。我可以在完全相同的情况下找到类似的问题，但 none。我有（简化）：指令：

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

Answer 2

请尝试以下方法，它更干净一些

if(isopen){
  scope.height= 1000;
}else{
  scope.height= 0; 
}


<div class="myclass" ng-style="{'max-height' : height + 'px'}">

要使代码更简洁，请使用以下代码：

scope.heignt = isopen ? 1000 : 0;

需要维护的代码更少:)

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

ng-style working initally but not on variable update

html

javascript

css

angularjs

ng-style