角度js指示文内のチェック・ボックス変更イベントは機能しません。

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の入力フィールドにイベントハンドラを添付しますが、DOMに$logoCheckboxを添付しないでください。代わりに、outerHTMLを取得し、イベントハンドラなしで新しい入力を作成しています$hideShowDiv