angularjs - 指令上的多个 ng 类属性

Question

Relevant plnkr.

在script.js我有一个指令 super .该指令有一个模板

template: '<div class="super" ng-class="{dirClass: foo}"></div>'

带有 ng-class属性。

请注意，该指令还有 replace: true .

<super>在 index.html 中调用此指令的元素有一个 ng-class属性也是如此。显然 Angular 不喜欢这样。它会尝试解析

[{viewClass: !bar} {dirClass: foo}]

这显然失败了。我希望它会自动合并..不。

我认为我要实现的目标很明确，但我该怎么做呢？

Answer 1

你可以这样做:http://plnkr.co/edit/xEc0pRHVbVLgR0NhWPEI?p=preview

js:

angular.module('app', [])
  .controller('myCtrl', function ($scope, $interval) {
    $scope.bar = false;

    $interval(function () {
      $scope.bar = !$scope.bar;
    }, 500);
  })

  .directive('super', function () {
    return {
      restrict: 'EA',
      template: '<div class="super" ng-class="{dirClass: foo , viewClass: !foo}" ></div>',
      scope: {
        foo: '='
      },
      replace: true
    };
  });

HTML:

 <super foo="bar"></super>