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。

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

以下是发生的事情：

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

获取参数 - 良好
将类添加到指令元素（test-directive）正在运行 - 好
正在创建div - Good
更改新创建的div上的className正在 - Good
将类添加到新创建的div中不起作用... - 不好

现在，任何人都可以告诉我为什么我不能添加课程但可以直接更改它？我知道我必须忘记一些事情......但无法弄清楚是什么！

Answer 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，并且可以手动完成所有这些操作。

AngularJS指令 - 将类添加到创建的＆＃39; div＆＃39;元件

1 个答案: