2014-12-03 2 views
0

내 각형 응용 프로그램에서 jQuery에 문제가 있습니다. 제거하고 클래스를 추가하는 것처럼 자바 스크립트로 몇 가지 작업을하고 싶지만 문제는 각도 컨트롤러 나 정렬 내부에서이 작업을 수행하지 않는다는 것입니다. 분리 된 .js 파일에서 수행하려고합니다. 코드 위AngluarJS + RoR + jQuery - jQuery의 문제

$(document).ready(function() { 
    $("a").click(function() { 
     console.log("CLICKED"); 
    }); 
    console.log($("a")); 
}); 

가 작동하지 않는 및 콘솔 내 문서에는 ""태그가 없음을 보여주고있다 : 그리고 여기 캐치, jQuery를 예,하지가해야하는 방법을 노력하고 있습니다. "a"태그가 있어도.

하지만이 코드는 아래의 작동, 그리고 콘솔 몸 전체 요소에 보여주는 것 : 나는 JQuery와 레일 보석을 사용하고

$(document).ready(function() { 
    $("body").click(function() { 
     console.log("CLICKED"); 
    }); 
    console.log($("body")); 
}); 

내 application.js 파일을 참조하실 수 있습니다. 나는 자산 파이프 라인을 사용하여 모든 각도 파일 (물론 테스트 제외)을 필요로합니다.

application.js : 나는 application.html.erb이다 루비 레일에 만 표준보기를 생성

//= require jquery 
//= require jquery_ujs 
//= require angular.min.js 
//= require angular-resource.min.js 
//= require angular-route.min.js 
//= require ./angular/angular_app_declaration.js 
//= require bootstrap-sprockets 
//= require_tree . 

가, 내가 API로의 RoR을 사용

는, 뷰의 나머지는 각 라우팅에 의해 처리, 그리고 네된다 "a"태그는 templateUrl을 생성하여 각도로 추가됩니다.

어떻게 jQuery를 만들 수 있습니까?

+0

1 단계 - 당신의 AngularJS와 응용 프로그램에서 jQuery를 사용하지 마십시오. – AlienWebguy

+0

문서에'a' 태그가 보이지 않습니다. –

답변

1

jQuery가 태그에 도달하려면 Angular Directives을 사용해야합니다.

(HTML)은 각진 템플릿으로로드됩니다. 이런 식으로 할 수 있습니다.

<a href="http://example.com" custom-directive >Link</a> 

는 다음 각도 app.js에서 지시합니다

app.module('App', []) 

... 

.directive('customDirective', [function(){ 
    return { 
     link : function(scope, elem, attr){ 
      elem.on('click', function(){ console.log(' CLICKED ! '); }); 
     }, 
     restrict : 'A' 
    } 

}])