0

I'm creating a angular directive using typescript

The directive is a simple div containing information.

When the divs is clicked it opens a modal.

I wanted to add a class to the body tag when the div is clicked.

I thought I might be able to do it using the Link function of the directive but I think I might be trying to do something that isn't possible

This code adds the class 'clicked' to the div that is clicked but is it possible to add the class to another element on the page like the body tag

    (()=>{

        class MyDirective implements ng.IDirective{

            public restrict = "E";
            public scope = {};
            public controller = "MyController";
            public controllerAs = "MyCtrl";
            public bindToController = true;
            public templateUrl = "MyOutput.html";
            public link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;

            constructor() {

                MyDirective.prototype.link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => {
                    element.on('click', function(){
                        element.addClass('clicked');
                        //$('body').addClass('clicked'); // trying to add class to body element
                    })
                };
            }

        }

        angular.module('myMod').directive('myDirective', ()=>new MyDirective());
    })();
ttmt
  • 5,822
  • 27
  • 106
  • 158
  • try angular.element('body').addClass('clicked')...not sure if that will work though. It's generally not good practice to use JQuery's $ selector in angular. – Luke Becker Nov 14 '16 at 17:55
  • Thanks for the suggestion but it didn't work. I didn't think it would be a good idea to use JQuery's $ selector. – ttmt Nov 14 '16 at 19:08

0 Answers0