angularjs 간단한 jquery 이벤트 리스너를 추가하십시오.

Question

좋아, 나는 간단한 것을 놓치고 있어야합니다. 나는 각도와 응용 프로그램을 만드는 중이라서 내가 분석 코드를 시청 형성 일부 구글을 구현하려는, 그래서

(function($) { 
    $(document).ready(function() { 
    $(':input').blur(function() { 
     if($(this).val().length > 0) { 
      _gaq.push(['_trackEvent', 'INSERT FORM NAME HERE', 'completed', $(this).attr('name')]); 
     } 
     else { 
      _gaq.push(['_trackEvent', 'INSERT FORM NAME HERE', 'skipped', $(this).attr('name')]); 
    }); 
    }); 
})(jQuery); 

이 here

내가 대신 지침의 같은 간단한 것을 사용하는 기대했다 볼 무언가 같이 원하는 모든 단일 양식 입력에. 그것은 제거를 위해 또는 나중에 무엇이든을 위해 1 개의 장소에서 이것을 지킬 것입니다.

그러나이 코드는 실행되지 않습니다. 폼의 부분에 ng-includes를 사용하고 있으므로 jquery 이벤트 리스너를 첨부하는 기존의 document.ready 방법과 같은 소리가 나옵니다. 이러한 부분이 포함되기 전에 발생하기 때문에 더 이상 작동하지 않습니다.

는 또한과 같이 최상위 폼 요소에 대한 지침을 시도 :

angular.module('ngPayment2App') 
.directive('formTracker', function() { 
    return { 
    restrict: 'E', 
    link: function postLink(scope, element, attrs) { 
     element.find(':input').on('blur',function(){ 
     console.log('finally!') 
     }) 
    } 
    }; 
}); 

이 '마지막'보여주지 않았다.

아무도 아이디어가 없습니다. 나는 멍청한 실수를하고있는 것을 안다, 나는 아직 그것이 무엇인지 알지 못한다. ...

Answer 1

지시어 (현재 작성된 방식)는 jQuery를 앱에 포함시키는 경우에만 작동한다. AngularJS와는 너무 find() 만, 예를 들어 요소 받아 jQuery lite 함께 제공하기 때문에

Working JSFiddle

이입니다 input, p, div 그래서 의사 클래스 선택기 (예 : :input)는 jQuery가 앱에 포함되어 있지 않으면 작동하지 않습니다. AngularJS 참조 앞에 jQuery에 대한 스크립트 참조를 추가하면됩니다. 또한 jqLite의 on() 함수는 이벤트 데이터를 지원하지 않습니다. 대신 bind()을 사용할 수 있어야합니다 (콘텐츠를 동적으로로드하지 않는다고 가정).

문서에서

angular.module('myApp', []) 
.controller("MyCtrl", function ($scope) {}) 
.directive('formTracker', function ($timeout) { 
    return { 
     restrict: 'E', 
     link: function postLink(scope, element, attrs) { 
      // Requires jQuery 
      element.on('blur', ':input', function() { 
       console.log('finally!'); 
      }); 

      // Timeout added for display purpose only 
      // Wait 3 seconds and add a new HTML input 
      $timeout(function(){ 
       element.append('<br><span>Element added after DOM has finished rendering</span><br><input id="dynamic-element" name="dynamic-elemen" type="text">'); 
      }, 3000); 

     } 
    }; 
});