Question

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

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最初工作但不是变量更新

2 个答案: