Angular directive event binding not working

Question

In short, my directive is successfully inserting the proper HTML but the bindings to events are not working. Can anyone suggest why this is happening?

  . . .   directive('rcpRadio', [ function( ) {
        return {
            restrict: 'E',
            link: function (scope, element, attr, ctrl) {
                var label, elementHTML, selection, selectionName;

                    if (typeof(attr) != "undefined" && typeof(attr.label) != "undefined") {
                        label = attr.label;
                    } else {
                        label = "";
                    }
                    if (typeof(attr) != "undefined" && typeof(attr.selection) != "undefined") {
                        selection = attr.selection;
                    } else {
                        selection = "";
                    }
                    if (typeof(attr) != "undefined" && typeof(attr.selectionName) != "undefined") {
                        selectionName = attr.selectionName;
                    } else {
                        selectionName = "";
                    }
                    if (typeof(attr) != "undefined" && typeof(attr.isChecked) != "undefined" && attr.isChecked == "true") {
                        elementHTML = "<div class='switch radius nyes'><input type='radio' value='" + selection + "' name='" + selectionName + "' id='" + selectionName + "_id' checked ><label for='" + selectionName + "'></label><span> " + label + " </span></div>";
                    } else {
                        elementHTML = "<div class='switch radius nyes'><input type='radio' value='" + selection + "' name='" + selectionName + "' id='" + selectionName + "_id'  ><label for='" + selectionName + "'></label><span> " + label + " </span></div>";
                    }


                    element.replaceWith(elementHTML);

                    element.on('click', function(event) {
                    //element.bind('click', function (event) {
                        alert(":CLICK:");
                        console.log("## CLICK! :");
                        console.log(event);
                    });
                    element.bind('mouseover', function() {
                        console.log("## HOVER! :");
                        console.log(event);
                    });
            }
    };
}]);

I really just want to call a function when any change to the inserted HTML is detected.

Any ideas would be much appreciated. I am pulling my hair out!

Update 7/28/2014 4:06

Well, by shifting away from "replaceWith" and instead using :

template: "<div class='switch radius'><input type='radio' value='{{selection}}' name='{{selectionName}}' id='{{selectionName}}_id' checked=''><label for='currentMode'></label><span> {{label}} </span></div>",

With some additions made to scope updates in link like:

$scope.label = attr.label;

Seems to then allow the event binding. So does replaceWith prevent event binding? I am so confused . .

Do you think ng-pristine or ng-dirty would help you out? docs.angularjs.org/api/ng/directive/form — Glenn Ferrie
– Glenn Ferrie, Commented Jul 28, 2014 at 2:58

Chickenrice · Accepted Answer · 2014-07-28 04:31:04Z

Actually, you could do the DOM transform in 'compile' function. Try to implement like this:

directive('rcpRadio', [ function( ) {
    return {
        restrict: 'E',
        compile: function(element,attr){
            //transform DOM according to attribute
            var label, elementHTML, selection, selectionName;

            if (typeof(attr) != "undefined" && typeof(attr.label) != "undefined") {
                label = attr.label;
            } else {
                label = "";
            }
            if (typeof(attr) != "undefined" && typeof(attr.selection) != "undefined") {
                selection = attr.selection;
            } else {
                selection = "";
            }
            if (typeof(attr) != "undefined" && typeof(attr.selectionName) != "undefined") {
                selectionName = attr.selectionName;
            } else {
                selectionName = "";
            }
            if (typeof(attr) != "undefined" && typeof(attr.isChecked) != "undefined" && attr.isChecked == "true") {
                elementHTML = "<div class='switch radius nyes'><input type='radio' value='" + selection + "' name='" + selectionName + "' id='" + selectionName + "_id' checked ><label for='" + selectionName + "'></label><span> " + label + " </span></div>";
            } else {
                elementHTML = "<div class='switch radius nyes'><input type='radio' value='" + selection + "' name='" + selectionName + "' id='" + selectionName + "_id'  ><label for='" + selectionName + "'></label><span> " + label + " </span></div>";
            }

            element.replaceWith(elementHTML);

            //return link function

            return function(scope,element,attr){
                element.on('click', function(event) {
                //element.bind('click', function (event) {
                    alert(":CLICK:");
                    console.log("## CLICK! :");
                    console.log(event);
                });
                element.bind('mouseover', function() {
                    console.log("## HOVER! :");
                    console.log(event);
                });
            };
        }
    }
}]);

Collectives™ on Stack Overflow

Angular directive event binding not working

Update 7/28/2014 4:06

1 Answer 1

Here is a jsFiddle DEMO

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update 7/28/2014 4:06

1 Answer 1

Here is a jsFiddle DEMO

Comments

Your Answer

Sign up or log in

Post as a guest

Related