javascript - AngularJS Directive - Adding class to created 'div' element - Stack Overflow

admin管理员组

文章数量:1323714

I'm trying to create a custom directive for my AngularJS project

Here's what I have so far :

.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? :/
            }
        };
    }
]);

For now, this a very simple directive, but it will grow larger. I'm creating an element dynamically because I want to use it as a modal box, and I will append a div to the body.

I want to add a different class while keeping the original class to have all the default styling.

Here's what's happening:

Using <test-directive custom-class="first" distinct-class="second" /> in the template

• Getting the parameters is working - Good
• Adding the classes to the directive element (test-directive) is working - Good
• Creating the div is working - Good
• Changing the className on the newly created div is working - Good
• Adding a class to the newly created div doesn't work... - NOT GOOD

Now, can anyone tell me why I can't add class but can change it directly? I know I must be forgetting something... but can't figure out what !

I'm trying to create a custom directive for my AngularJS project

Here's what I have so far :

.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? :/
            }
        };
    }
]);

For now, this a very simple directive, but it will grow larger. I'm creating an element dynamically because I want to use it as a modal box, and I will append a div to the body.

I want to add a different class while keeping the original class to have all the default styling.

Here's what's happening:

Using <test-directive custom-class="first" distinct-class="second" /> in the template

• Getting the parameters is working - Good
• Adding the classes to the directive element (test-directive) is working - Good
• Creating the div is working - Good
• Changing the className on the newly created div is working - Good
• Adding a class to the newly created div doesn't work... - NOT GOOD

Now, can anyone tell me why I can't add class but can change it directly? I know I must be forgetting something... but can't figure out what !

• javascript
• angularjs
• angularjs-directive

Share Improve this question Follow asked Jan 15, 2015 at 19:11 eHxeHx 18122 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

createdDiv.addClass(param.distinctClassName); does not work because it is a DOM element, it is not a jqlite wrapped angular element. And addClass is a function added on the jq wrapper and not available on the DOM element.

You would need to do:

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

and el.addClass(param.distinctClassName) works because the element is an angular element (jq[lite] wrapped DOM element).

Leaving apart this issue, you could easily have a template for your directive and use ng-class bound to a scope property and you can get away from doing all these manually.

本文标签： javascriptAngularJS DirectiveAdding class to created 39div39 elementStack Overflow