Question

您好我正在尝试解析以下html，以便它应用$root.buttonClass='btn-primary'中存储的css类（例如）

<li ng-controller="controllerCtrl">
   <a ng-class="{'$root.buttonClass':viewingContext=='{{entity}}'}" 
      ng-repeat="entity in entities" 
      ng-click="setContext(entity)" 
     type="">
     <span class="label bg-info pull-right" 
           ng-class="{hidden:viewingContext!='{{entity}}', show:viewingContext=='{{entity}}'}">
           viewing</span>
           {{entity}}</a>
</li>

控制器非常简单：

  $scope.setContext = function (entity) {
    console.log('set the context as: ' + entity);
    if (entity == $scope.entities[0]) {
      $scope.$root.buttonClass = 'btn-primary';
      $scope.viewingContext = entity;
    }
    if (entity == $scope.entities[1]) {
      $scope.$root.buttonClass = 'btn-warning';
      $scope.viewingContext = entity;
    }
    if (entity == $scope.entities[2]) {
      $scope.$root.buttonClass = 'btn-danger';
      $scope.viewingContext = entity;
    }
  };

标签中的行可能是问题！

<a ng-class="{'$root.buttonClass':viewingContext=='{{entity}}'}" 
   ng-repeat="entity in entities" 
   ng-click="setContext(entity)" 
   type="">

更新

试图制作一个js小提琴http://jsfiddle.net/gn6b4ng8/2

Answer 1

您无法在对象中拥有动态密钥名称。从documentation开始，看起来你正在尝试使用第二种类型的表达式，一个对象，但是违反了结构＆＃34;如果表达式求值为一个对象，那么对于每个键值具有truthy值的对象对应的密钥用作类名。＆＃34;密钥将按原样用作类名。

看起来你想要使用ng-class＆＃34可能使用的第一种表达式;如果表达式求值为字符串，则该字符串应该是一个或多个以空格分隔的类名。＆＃34 ;相反，如果您执行ng-class="$root.buttonClass"之类的操作。那应该通过解析你存储在buttonClass中的类名来解决你的问题。您可以在文档中查看使用<p ng-class="style">Using String Syntax</p>

的示例

Answer 2

我认为ngClass不会按照你想要的方式运作。

从技术上讲，只有在每次更改后重新编译元素时，才能使用ngClass实现目标。这样，Angular会将ngClass值的更改应用于您的元素。

我认为这不是一个好方法。

幸运的是，这是Angular，您可以使用指令创建自己的功能。您可以创建一个指令，让我们称之为dynamicClass，它将具有与ngClass类似的行为，但会响应类名中的更改：

myApp.directive('dynamicClass', function($compile) {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            $scope.$watch(function() {
                return attrs.dynamicClass;
            }, function(newVal, oldVal) {
                var condition = newVal.match(/:(.*?)\}$/)[1];
                var cls = newVal.match(/^\{'?(.*?)'?:/)[1];
                var oldCls = oldVal.match(/^\{'?(.*?)'?:/)[1];
                element.removeClass(oldCls);
                if ($scope.$eval(condition)) {
                    element.addClass(cls);
                }    

            });
        }
    };
});

用法：

<a dynamic-class="{'{{$root.buttonClass}}':viewingContext=='{{entity}}'}" 
  ng-repeat="entity in entities" 
  ng-click="setContext(entity)">

我分叉你的小提琴来测试它。 It works

ng-repeat ng-class条件的语法

2 个答案: