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进行操作，但是动画只有在我添加类时才有效，但是不能用于删除（如果我有css样式，如{{1}等等。

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

添加ng-class的类指令

1 个答案: