AngularJS指令 - 为创建的'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.

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

这是发生了什么:

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

• 获取参数是有效的- 很好
• 将类添加到指令元素(test-directive)是有效的- 好
• 创建div正在运行- 很好
• 更改新创建的div上的className正在运行- 很好
• 将类添加到新创建的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绑定到范围属性,你可以手动完成所有这些操作.