抽象 ng-class 语句答案

【问题标题】：Abstracting ng-class statement抽象 ng-class 语句
【发布时间】：2015-09-10 17:46:07
【问题描述】：

我试图在我的 UI 中的 ng 类变量中放置具有嵌套变量的相对复杂的逻辑。

目前，它看起来像

ng-class="
    {
        'active': MyView.is_sorter($index),
        'smallblock90':(MyView.navFlow.selectedPanel == 'players' 
                        && MyView.stat_type == 'box'),
        'smallblock80':(MyView.navFlow.selectedPanel != 'players' 
                        && MyView.stat_type == 'shoot')
    }"

现在，这种（或非常不同的）逻辑在我的代码中经常出现，并且在 UI 中显然非常麻烦。有没有办法抽象这个，或者应该采取更好的方法？

为了给出一些观点，我正在尝试根据选择的一些面板来调整 div 的宽度。 div 通常为 70px，但在某些情况下可能会变为 80px 或 90px

【问题讨论】：

我建议不要在模板中添加复杂的逻辑。如果您将逻辑提取到两个函数中看起来会更好：isSmallBlock80() 和 isSmallBlock90()，并且您也可以对“活动”类执行相同操作。

标签： angularjs user-interface dry ng-class

【解决方案1】：

你可以将一个类的数组从一个函数返回给 ng-class。看这个样本：http://jsbin.com/jewili/edit?html,css,js,output

<div ng-class="myTest(1)">passing one</div>

还有 myTest 函数：

$scope.myTest = function(arg) {
    var out = [];
    if(arg == 1 || arg == 2)
        out.push('classA');
    if(arg == 2) {
        out.push('classB');
    }
    if(arg == 3) {
        out.push('classC');
    }
    return out;
};

您可以测试函数中的任何内容，而不仅仅是参数...您可以测试 MyView.navFlow.selectedPanel 或其他变量

【讨论】：

【解决方案2】：

您可以将逻辑包装在指令中（完整示例）。

<body ng-app="app" ng-controller="Ctrl">
  <fieldset>
    <p blocks="myView">Some content here</p>
  </fieldset>
</body>

angular.module('app',[])
  .controller('Ctrl', function($scope) {
    $scope.myView = {
      active: true
    };
  })

  .directive('blocks', function($compile) {
    return {
      restrict: 'A',
      scope: {
        blocks: '='
      },
      link: function(scope, element) { 
        element.removeAttr('blocks');
        element.attr('ng-class', '{ \'active\': blocks.active }');
        $compile(element)(scope);
      }
    };  
  });

.active {
  color: #ff0000; 
}

作为旁注，您确实应该始终使用===/!== 进行比较并遵循命名约定，因此is_sorter 将变为isSorted。

【讨论】：