AngularJS 指令 - 添加 class 到创建的 'div' 元素

Question

我正在尝试为我的 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。

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

情况如下：

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

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

现在，谁能告诉我为什么我不能添加 class 但可以直接更改它？我知道我一定是忘记了什么...但无法弄清楚是什么！

Answer 1

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

您需要做：

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

和 el.addClass(param.distinctClassName) 有效，因为元素是 angular 元素（jq[lite] 包裹 DOM 元素）。

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

AngularJS 指令 - 添加 class 到创建的 'div' 元素

AngularJS Directive - Adding class to created 'div' element

javascript

angularjs

angularjs-directive