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进行任何更改时调用函数。

任何想法都会非常感激。我把头发拉出来了！

2014年7月28日更新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;

似乎然后允许事件绑定。那么替换是否会阻止事件绑定？我感到很困惑。

Answer 1

实际上，你可以在＆＃39;编译＆＃39;中进行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);
                });
            };
        }
    }
}]);

Angular指令事件绑定不起作用

2014年7月28日更新4:06

1 个答案:

这是jsFiddle DEMO