Question

这是一个angularjs指令。我在html指令中添加了这个。

app.directive("propertyArea", ['$window','$compile', function ($window, $compile) {
    return {
        restrict: "EA",

        link: function (scope, el, attrs) {
            var $el = angular.element(el);
            var $mainDiv = angular.element('<div class="theme-logo2"></div>');
            $el.append($mainDiv);
            scope.IdentityPropertyclick = function () {
                if ($window.IdentityAdded) {
                    var $mainDiv = angular.element(el).find('.theme-logo2');
                    var $fontsize = [
                        '10,10',
                        '20,20'
                    ];
                    var $fonts = [
                        'Arial,Arial',
                        'Arial Black,Arial Black',
                        'Comic Sans MS,Comic Sans MS',
                        'Courier New,Courier New',
                        'Georgia,Georgia',
                        'Impact,Charcoal',
                        'Lucida Console,Monaco',
                        'Lucida Sans Unicode,Lucida Grande',
                        'Palatino Linotype,Book Antiqua',
                        'Tahoma,Geneva',
                        'Times New Roman,Times',
                        'Trebuchet MS,Helvetica',
                        'Verdana,Geneva',
                        'Gill Sans,Geneva'
                    ];                   
                    var $fontCalibrateDiv = angular.element('<div style="background: white;'+
                        'text-align: center;padding: 8px;"><div class="row" ><select id="fontFamilySelect"'+ 'style="margin:2px;">'+    
                        '</select><select id="fontSizeSelect" style="margin:2px;">'+
                        '</select></div ><div class="row"><span style="margin:2px;" class="mouseOver">B</span><span class="mouseOver"'+ 'style="margin:2px;"> <i>I</i>'+
                        '</span ><span style="text-decoration: underline;margin:2px;" class="mouseOver">U</span>' +         
                        '<span style="margin:2px;"><div id="paintCan" class="input-group colorpicker-component">'+
                        '<input type= "hidden" value= "#00AABB" /><span class="input-group-addon"><i></i></span>'+
                        '</div ></span>'+
                        '</div ></div > ');
                    $fontCalibrateDiv.find('#paintCan').colorpicker();
                    var $fontFamilySelect = $fontCalibrateDiv.find("#fontFamilySelect");

                    angular.forEach($fonts, function (val, key) {
                        var sp = val.split(",");
                        $fontFamilySelect.append('<option style="font-family:' + sp[1] + '" value=' + sp[1] + '>' + sp[0] + '</option>');
                    });

                    var $fontSizeSelect = $fontCalibrateDiv.find("#fontSizeSelect");
                    angular.forEach($fontsize, function (val, key) {
                        var sp = val.split(",");
                        $fontSizeSelect.append('<option value=' + sp[1] + '>' + sp[0] + '</option>');
                    });


                    $mainDiv.append($fontCalibrateDiv);

                    var $logoCheckbox = angular.element('<input type="checkbox" name="identityLogo"'+ 
                        'value="Logo"  />').on('change', function () { alert(); });
                    compiled = $compile($logoCheckbox)(scope);



                    var $hideShowDiv = angular.element('<div style="background: white;' +
                        'text-align:start;padding: 8px;margin-top: 10px;padding-left: 63px;">' +
                        '<div class="row">' + $logoCheckbox["0"].outerHTML +'LOGO</div>' +
                        '<div class="row"><input type="checkbox" name="identityName" value="Name"/>NAME</div>' +
                        '<div class="row"><input type="checkbox" name="identityDateAndTime" value="DateAndTime"/>'+
                        'DATE & TIME</div ></div > ');


                    $mainDiv.append($hideShowDiv);


                } else {
                    $el.empty();
                    var $mainDiv = angular.element('<div class="theme-logo2"></div>');
                    $el.append($mainDiv);

                }
            }

        }
    };
}]);

有一个名为identityLogo的复选框我试图将更改事件附加到它，但看起来事件没有附加。我试图弄清楚为什么，但找不到，我需要纠正的，也许在指令中有一些错误我曾经做过这种工作，并且在那个指令中工作正常。

Answer 1

您将事件处理程序附加到$logoCheckbox中的输入字段，但是您没有将$logoCheckbox附加到DOM;相反，你抓住outerHTML并在$hideShowDiv

中创建一个没有事件处理程序的新输入

角度js指令内的复选框更改事件无效

1 个答案: