Question

我正在与其他人的代码合作。目前，我有以下自定义指令，我想在不更改其余代码的情况下添加类：

<b-tab tab-title="Business Plan <p>Good server</p>" class="corp active">
</b-tab>
<b-tab tab-title="Corporate Plan" class="corp">
</b-tab>
<b-tab tab-title="International Plan <p>Best server speeds</p>" class="corp">
</b-tab>

课程：＆＃39;活跃＆＃39;选项卡处于活动状态时会自动添加到此选项卡。我想在我的所有标签中添加特定的类。

该指令类似于：

angular.module("app").directive('bTab', ['$timeout', '$sce',             function($timeout, $sce) {
return {
    require: '^bTabGroup',
    transclude: true,
    replace: true,
    restrict: "AE",
    templateUrl: '/tabs/_tab.tmpl',
    scope: true,
    link: function (scope, element, attrs, tabGroupCtrl) {
        var set_active = ('setActive' in attrs && attrs.setActive.toLowerCase() === 'true');

        attrs.$observe("tabTitle", function() {
            if ("tabTitle" in attrs) {
                scope.tabTitle = $sce.trustAsHtml(attrs.tabTitle);
            } else {
                scope.tabTitle = $sce.trustAsHtml("No title");
            }
        });

        attrs.$observe("tabName", function() {
            if ("tabName" in attrs) {
                scope.tabName = attrs.tabName; // can I add a class here when it has the class 'active'?
            } else {
                scope.tabName = undefined;
            }
        });

        var priority = parseInt(attrs.tabPriority) || 0;
        tabGroupCtrl.addTab(scope, element, priority, set_active);

        scope.$on('$destroy', function() {
            tabGroupCtrl.removeTab(scope);
        });
      }
    };
}]);

我要添加的课程是：

corp1-active

corp2-active

corp3-active

Answer 1

是的，你可以。我使用的是ng-class，你可以在范围内设置一个值。

HTML：

<b-tap ng-value="myValue" class="{{myValue.newClass}}">

指令：

    attrs.$observe("tabName", function() {
        if ("tabName" in attrs) {
            scope.tabName = attrs.tabName; // can I add a class here?
            scope.newClass = "corp1-active";
        } else {
            scope.tabName = undefined;
        }
    });

或者你可以将它与角元素一起使用。

    attrs.$observe("tabName", function() {
        if ("tabName" in attrs) {
            scope.tabName = attrs.tabName; // can I add a class here?
            element.addClass("corp1-active");
        } else {
            scope.tabName = undefined;
        }
    });

Answer 2

attrs.$observe正在观察内插值，并在每次内插值发生变化时触发。因此，在您的情况下，使用scope.$watch来监视元素的类更改会更方便。

我试着解释一下：

＆＃13;

angular.module('app', [])
  .run(function($interval) {
    var i = 0;
    $interval(function() {
      // just a hack to see in action
      // the assignment of "active" class and
      // sync change of dependant classes
      
      var $corp = $('.corp')
      .removeClass('corp1-active corp2-active corp3-active');
      $corp.eq(i % 3)
      .addClass('corp' + ((i % 3) + 1 ) + '-active');
      i+=1;
    }, 1000);
  })
  .directive('bTab', function() {
    return {
      replace: true,
      template: '<div ng-bind="title"></div>',
      scope: true,
      link: function(scope, element, attrs) {
        scope.title = attrs.tabTitle;
        var activeTabClass = attrs.tabName + '-active';
        scope.$watch(function() {
          return element.hasClass('active');
        }, function(newValue, oldValue) {
          if (newValue !== oldValue) {
            if (newValue) {
              attrs.$addClass(activeTabClass);
            } else {
              attrs.$removeClass(activeTabClass);
            }
          }
        });

      }
    }
  });

＆＃13;

.corp1-active {
  background: green;
}

.corp2-active {
  background: red;
}

.corp3-active {
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="app">
  <b-tab tab-name="corp1" tab-title="Business Plan <p>Good server</p>" class="corp active">
  </b-tab>
  <b-tab tab-name="corp2" tab-title="Corporate Plan" class="corp">
  </b-tab>
  <b-tab tab-name="corp3" tab-title="International Plan <p>Best server speeds</p>" class="corp">
  </b-tab>
</div>

＆＃13;

如何根据angularJS中是否存在另一个类向元素添加类

2 个答案: