AngularJS - 如何为自定义指令设置 css 类？答案

【问题标题】：AngularJS - how to set css class for the custom directive?AngularJS - 如何为自定义指令设置 css 类？
【发布时间】：2016-09-23 00:37:37
【问题描述】：

为nav html 元素设置tab css 类，我将使用它作为这样的指令：

<nav tab></nav>

预计会这样解释：

<nav class="tab">
    <a></a>
    <a></a>
    <a></a>
</nav>

...除了我无法将 CSS 类设置为顶部 <nav> 元素的问题外，一切都几乎按预期工作。当然，我可以使用ng-class 明确指定它，但这似乎不是一个好主意。

听说过.addClass() 选项，但它根本不起作用：

tab.directive('tab', function($compile) {
        return {
            restrict: 'A',
            templateUrl: 'nav-tab.html',
            controller: function($http, $scope) {
                $http.get('/Tab/List')
                    .success(function(data) {
                        $scope.tabs = data;
                    }).error(function() {
                        alert("error");
                    });
            },
            controllerAs: 'tab',
            link: function(element, scope) {
                angular.element(element).addClass('tab');
                $compile(element)(scope);
            }
        }
    });

如何在没有明确指定的情况下将 CSS 类添加到顶部指令元素？

【问题讨论】：

.addClass 时发生了什么？控制台有什么错误吗？
@PankajParkar，当前代码是空的 Chrome 控制台。如果我使用.addClass() 作为element.addClass() 它说.addClass is not a function，我认为它发生是因为没有JQuery

标签： javascript html css angularjs angularjs-directive

【解决方案1】：

你在链接函数中有错误的顺序

代替

link: function(element, scope) {

改成

link: function(scope, element, attrs) {

然后你可以直接做element.addClass 因为jQLite api 有.addClass 方法可用。

【讨论】：

是的，因为我已经切换到element.addClass('tab')，所以它确实有效。谢谢:)) 5 分钟接受
一旦你解决了上述问题，你也不需要包装元素。

【解决方案2】：

我会将您的指令更改为“元素”（属性的“E”而不是“A”）

<tab></tab>

tab.directive('tab', function($compile) {
return {
    restrict: 'E',
    templateUrl: 'nav-tab.html'...

然后在模板中添加类nav-tab.html：

<nav class="tab">
  <a></a>
  <a></a>
  <a></a>
</nav>

【讨论】：

replace: true 已被弃用.. 不鼓励使用它.. 没有replace: true 它显然可以工作。