Функция изменения JQuery никогда не вызывалась

Question

У меня очень простой код JQuery, и он никогда не показывает второе предупреждение. Кто-нибудь знает, что не так?

 <script type="text/javascript"> 
      $(document).ready(function() { 
       alert("1"); 
       $(".images_clicable input").change(function(){ 
         alert("2"); 
       }); 
      }); 
      $(".images_clicable input").change(function(){ 
       alert("2"); 
      }); 
     </script> 
     <div> 
      <div class="images_clicable addPhoto">      
       <label for="label_image1"> 
        <img class="img_preview" id="image1" src="./img/plus.png" height="100px"> 
       </label> 
       <input name="image1" id="label_image1" type="file">      
      </div> 
     </div> 

Этот код находится в угле.

Answer 1

Причина, по которой у вас возникли проблемы в том, что вы не делать вещи в AngularJS пути, но вы делает их таким образом, JQuery. То, что вы пытаетесь выполнить в Angular, вероятно, должно быть выполнено с использованием directives. Внутри директивы вы можете получить доступ к интерфейсу jqLite для jQuery, который будет охватывать 90% всего, что вы могли бы захотеть сделать с jQuery.

Вот пример директивы:

app.directive('alertOnChange', function() { 
    return function(scope, element, attrs) { 
    element.on('change', function() { 
     alert("It works!"); 
    }); 
    }; 
}); 

Вот измененное <input> тег:

<input alert-on-change name="image1" id="label_image1" type="file"> 

Here является plunker.

Answer 2

Этот код работает для меня, и я не знаком с угловым переписанием угловым способом.

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     //check the name of input 

     var input_name = $(input).attr('name'); 
     reader.onload = function (e) { 
      $('#'+input_name).attr('src', e.target.result); 
      $('#label_'+input_name).attr('value', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
} 

    $(".images_clicable input").change(function(){ 
     readURL(this); 
    });