基于变量 using 指令添加 css 类（或样式）答案

【问题标题】：adding css class (or style) based on the variable using directive基于变量 using 指令添加 css 类（或样式）
【发布时间】：2018-02-08 19:13:58
【问题描述】：

我有一个场景，我必须根据变量多次使用 ng-style（或 ng-class）。

但这给我带来了很多痛苦，因为每次（对于每个小部件）ng-class 都编写相同的功能。

所以想知道是否有办法摆脱它。我知道我可以创建一个 C 类型指令来实现这一点。但这似乎不起作用。

这是我的代码：

<div class="panel panel-primary" ng-style="expanded1 ? {{'height': viewPortHeight} : ''" ng-click="expanded1=!expanded1">Panel 1</div>
..........
<div class="panel panel-primary" ng-style="expanded2 ? {{'height': viewPortHeight} : ''" ng-click="expanded2=!expanded2">Panel 2</div>

我可以有一个指令（C 或 A），它可以看到变量“扩展”（仅适用于这个元素）并将样式添加到这个元素。

我试过了，但似乎不起作用

== 指令

(function (app) {
  app.directive('expandWidget', function() {
      return {
          restrict: 'A',
          link: function(scope, element, attrs) {
            scope.$watch('expanded', function(expanded){
                if(expanded)
                    element.css('height', 'viewPortHeight')
                else element.css('height', '300px')
            })
          }
      }
    })
})
<div class="panel panel-primary" expand-widget ng-click="expanded1=!expanded1">Panel 1</div>

我也可以使用其他方法，它可以达到上述目的。

【问题讨论】：

你在使用引导程序吗？ panel panel-primary 闻起来像 bs3.x ..？
是的..我正在使用引导程序。

标签： javascript css angularjs angularjs-directive

【解决方案1】：

我解决了你的问题，希望这会有所帮助。

.directive('expandWidget', function() { 返回 { 限制：'A'，链接：函数（范围，元素，属性）{

  var expanded = attrs['expanded'] === 'true' || false;
  var exapndedHeight = (attrs['exapndedHeight'] || 600) + 'px';
  var collapsedHeight = (attrs['collapsedHeight'] || 50) + 'px';

  function setHeight() {
    element[0].style.height = expanded ? exapndedHeight :  collapsedHeight;
  }

  function toggle() {
    expanded = !expanded
    setHeight();
  }

  element[0].addEventListener( attrs['trigger'] || 'click', toggle);
  setHeight();
}

} })

https://plnkr.co/edit/Hthl41G0dbZhk8v2BDFv

【讨论】：

【解决方案2】：

你可以有一个范围变量：

$scope.expanded = false;

将其作为属性传递给指令：

<div class="panel panel-primary" 
   expand-widget 
   expanded="{{ expanded }}" 
   ng-click="expanded = !expanded">

使用attrs.$observe 测试扩展属性是否发生变化，并在发生时对元素执行任何操作：

.directive('expandWidget', function() {
  return {
    restrict: 'A',
    scope: {
      expanded: '@'  
    },
    link: function(scope, element, attrs) {
      attrs.$observe('expanded', function(expanded){
        expanded = expanded == 'true'
        if (expanded) { 
          element[0].style.height = '250px'
        } else {           
          element[0].style.height = '100px'
        }   
      })
    }    
  }
})

演示 -> http://plnkr.co/edit/0FHVGwQx7jogHyGol7fN?p=preview

$scope.expanded 只是一个例子。如果你有很多面板，你可以有一个

$scope.panels = {
  expanded1: true,
  expanded2: false,
  expanded3: false
  ...
}

并以$scope.panels.expanded2 等为目标。我不确定您所说的“viewPortHeight”是什么意思，所以我只是在示例代码中设置了任意高度。

如果你想切换类而不是与元素 style 混合，你可以这样做：

attrs.$observe('expanded', function(expanded){
   expanded = expanded == 'true'
   if (expanded) { 
     $(element)
       .removeClass('defaultClass')
       .addClass('expandedClass')
   } else {            
     $(element)
       .removeClass('expandedClass')
       .addClass('defaultClass')
   }   
})

演示 -> http://plnkr.co/edit/UZWPYoTOu0ABqnVqrmw3?p=preview

这里可以使用 jQuery，因为你已经在使用 bootstrap。

【讨论】：