添加ng-class的Class指令

Question

如果我有这样的东西

<div ng-class="{'breakfast': meal == 'eggs'}"></div>

现在我需要创建一个指令来添加相同的东西，所以这样做：

restrict: 'C'
scope:
    meal:"&"
link:(scope, element, attr)->
    element.attr('ng-class', "{'breakfast': meal == 'eggs'}")

将属性添加到DOM，但之后什么都不会发生，当为meal == 'eggs'时，它不会将breakfast类添加到元素。我做错了什么？

ps。我当然可以用element.addClass和element.removeClass来做，但是动画只有在我添加类的时候才会起作用，但不会在移除时起作用(如果我有像.breakfast-add, .breakfast-remove这样的css样式)。

Answer 1

您可以在指令的模板中使用ng-class，并对您的类使用范围变量，而不是在链接或编译时修改元素的属性。在下面的示例中，它适用于我，而且看起来更干净：

HTML：

<div ng-app="app">
  <div class="meal: eggs;">xxx</div>
</div>

JS：

angular.module('app', [])
.directive('meal', function () {
  return {
    template: '<div ng-class="classes" ng-transclude></div>',
    transclude: true,
    restrict: 'C',
    scope: {
      meal: '@'
    },
    link: function (scope) {
      scope.classes = {
        breakfast: (scope.meal == 'eggs')
      };
    }
  };
});