Monday, October 26, 2015

Basic Highlighter Directive for AngularJS

The only thing this very basic Angular directive does is highlight a table row when you click it. The repeat click removes the highlight.
app.directive('highlight', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('click', function (evt) {           
                if (evt.target.nodeName == 'TD') {
                    var tr = evt.target.parentNode;
                    if (!tr.onfire) {
                        tr.style.backgroundColor = "#F3F781";
                        tr.onfire = true;
                    }
                    else {
                        tr.style.backgroundColor = "";
                        tr.onfire = false;
                    }
                }   
            });
        }
    };
});