AngularJS 指令 - 将类添加到创建的“div”元素答案

【问题标题】：AngularJS Directive - Adding class to created 'div' elementAngularJS 指令 - 将类添加到创建的“div”元素
【发布时间】：2015-03-14 07:14:18
【问题描述】：

我正在尝试为我的 AngularJS 项目创建自定义指令

这是我目前所拥有的：

.directive('testDirective', [

    function () {

        return {
            restrict: "EA",
            replace: false,
            transclude: false,

            link: function ($scope, el, attrs) {
                var param = {};

                param.className = attrs.customClass || 'default-class';
                param.distinctClassName = attrs.distinctClass || 'added-class';

                el.addClass(param.distinctClassName); // this works? :|

                var createdDiv = null;

                createdDiv = createdDiv || document.createElement('div');
                createdDiv.className = param.className; // this works...
                createdDiv.addClass(param.distinctClassName); // this doesn't work? :/
            }
        };
    }
]);

目前，这是一个非常简单的指令，但它会变得更大。我正在动态创建一个元素，因为我想将它用作模态框，并且我将在正文中附加一个 div。

我想添加一个不同的类，同时保持原始类具有所有默认样式。

发生了什么：

在模板中使用<test-directive custom-class="first" distinct-class="second" />

正在获取参数- 很好
将类添加到指令元素（测试指令）正在工作 - 好
正在创建 div - 很好
在新创建的 div 上更改 className 正在工作 - 好
向新创建的 div 添加类不起作用... - 不好

现在，谁能告诉我为什么我不能添加类但可以直接更改它？我知道我一定是忘记了什么……但不知道是什么！

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

createdDiv.addClass(param.distinctClassName); 不起作用，因为它是一个 DOM 元素，它不是 jqlite 包装的角度元素。 addClass 是在 jq 包装器上添加的函数，在 DOM 元素上不可用。

你需要这样做：

angular.element(createdDiv).addClass(param.distinctClassName);

并且el.addClass(param.distinctClassName) 有效，因为该元素是一个角度元素（jq[lite] 包装的 DOM 元素）。

撇开这个问题不谈，您可以轻松地为您的指令创建一个模板并使用绑定到范围属性的ng-class，您可以摆脱手动执行所有这些操作。

【讨论】：