AngularJS에서 jQuery 플러그인을 통합하는 올바른 방법


217

jQuery 플러그인을 각도 앱에 통합하는 올바른 방법이 무엇인지 궁금합니다. 여러 튜토리얼과 스크린 캐스트를 찾았지만 특정 플러그인에 적합합니다.

예를 들어 : http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://www.youtube.com/watch?v=8ozyXwLzFYs

이렇게 지시문을 만들어야합니까-

App.directive('directiveName', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName));
        }
    };
}); 

그리고 html에서 스크립트와 지시어를 호출합니까?

<div directiveName ></div>
<script type="text/javascript" src="pluginName.js"></script>

미리 감사합니다


4
예, 가장 좋은 방법은 필요한 jQuery 플러그인을 지시문 안에 넣는 것이므로 범위 변수의 이점을 얻고 초기화 / 메서드 호출을 제어합니다.
Bhaskara Kempaiah

나는 어떤 상황에서도 평가에 대해 어떻게 생각하는지 모르겠다 ... 그냥 나쁜 연습을 들었다
sksallaj

1
$(element).pluginActivationFunction(scope.$eval(attrs.directiveName));인용 부호 가 없어야 합니다.
Maxim Zubarev 2016 년

답변:


143

그래 정확 해. jQuery 플러그인을 사용하는 경우 컨트롤러에 코드를 넣지 마십시오. 대신 지시문을 작성하고 일반적으로 link지시문 의 함수 안에있는 코드를 넣으십시오 .

문서에서 살펴볼 수있는 몇 가지 사항이 있습니다. 여기에서 찾을 수 있습니다 :
일반적인 함정

컨트롤러를 올바르게 사용하기

뷰에서 스크립트를 참조 할 때 angularjs 라이브러리, 컨트롤러, 서비스 및 필터가 참조 된 후에 마지막으로 참조하는지 확인하십시오.

편집 :를 사용하는 대신 jQuery와 함께 AngularJS를 $(element)사용할 angular.element(element)때 사용할 수 있습니다


1
HTML 컨텐츠를 허용하는 jQuery 플러그인의 매개 변수는 어떻습니까? (예를 ng-click
들어이

1
@Fractaliste 무슨 뜻인지 잘 모르겠습니다. 예를 들어 줄 수 있습니까?
callmekatootie

정확히 $ (element). 'pluginActivationFunction'(scope. $ eval (attrs.directiveName)); 의미합니까?
Gaurav_soni

나는 거의 angularjs의 초보자입니다. 여러 jquery 플러그인을 사용하려고했지만 그중 아무것도 작동하지 않았습니다. 우리는 정말로 이것을해야합니까? 그들은 단지 angularjs를 따라 작동 할 수 없습니까? 나에게 보일러 플레이트처럼 들린다.
Moebius

왜 스크립트가 마지막에 와야합니까?
Mike R

0

지시어와 서비스 / 공장이 제대로 작동하지 않는 2 가지 상황이 있습니다.

시나리오는 서비스의 의존성 주입이있는 지시문을 가지고 있었고 지시문에서 서비스에 ajax 호출 ($ http 포함)을 요청하는 것입니다.

결국 두 경우 모두 ng-Repeat는 배열에 초기 값을 주었을 때도 전혀 제출하지 않았습니다.

나는 심지어 컨트롤러와 격리 된 범위로 지시문을 만들려고했습니다.

모든 것을 컨트롤러로 옮겼을 때만 마술처럼 작동했습니다.

여기에 대한 예제 Angular JS에서 jQuery 플러그인 (RoyalSlider) 초기화

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.