Question

我有一个场景，我必须根据变量多次使用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），它可以看到变量＆＃34;扩展＆＃34; （仅适用于此元素）并将样式添加到此元素。

我试过这个，但这似乎没有效果

==指令

(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>

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

Answer 1

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

.directive（'expandWidget'，function（）{ 返回{ 限制：'A'， link：function（scope，element，attrs）{

  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

Answer 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'
        }   
      })
    }    
  }
})

演示 - ＆gt;的 http://plnkr.co/edit/0FHVGwQx7jogHyGol7fN?p=preview

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

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

并改为定位$scope.panels.expanded2等。我不确定你的意思＆＃34; viewPortHeight＆＃34;所以我只是在示例代码中设置了一个任意高度。

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

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

演示 - ＆gt;的 http://plnkr.co/edit/UZWPYoTOu0ABqnVqrmw3?p=preview

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

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

2 个答案: