Angular指令事件綁定不起作用

Question

簡而言之，我的指令成功插入了正確的HTML，但是對事件的綁定不起作用。 誰能說明為什么會這樣？

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

我真的只想在檢測到對插入的HTML的任何更改時調用一個函數。

任何想法將不勝感激。 我正在拔頭發！

更新7/28/2014 4:06

好吧，通過從“ replaceWith”轉移而改為使用：

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

對鏈接中的范圍更新進行了一些添加，例如：

$scope.label = attr.label;

然后似乎允許事件綁定。 那么replaceWith會阻止事件綁定嗎？ 我感到很困惑 。 。

Answer 1

實際上，您可以在“編譯”功能中進行DOM轉換。 嘗試這樣實現：

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);
                });
            };
        }
    }
}]);

這是一個jsFiddle演示