class 语句的抽象

Question

我试图在 UI 的 ng-class 变量中放置相对复杂的逻辑和嵌套变量。

目前，它看起来像

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

Answer 1

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

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

Answer 2

您可以 return 从函数到 ng-class 的 classes 数组。看这个例子：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 或其他 vars

class 语句的抽象

Abstracting ng-class statement

user-interface

dry

angularjs

ng-class