angularjs 지시문에서 JQuery 플러그인을 사용할 수 있습니까?

나는 일반적으로 javascript에 상당히 익숙하다. 지난 몇 주간 Angular.js로 프런트 엔드를 구축했습니다.angularjs 지시문에서 JQuery 플러그인을 사용할 수 있습니까?

내 페이지에 앉아있는 것으로 정의한 여러 가지 지침이 있습니다. Angular는이를 위해 아주 좋습니다.

<body class="body" ng-controller="OverviewController as overview" font-size:1em> 
    <sidebar-menu ng-controller="PanelController as panel"></sidebar-menu> 
    <div id="content" > 
     <div> 
      <div class="list-group"> 
       <div class="list-group-item" ng-repeat="site in overview.sites" ng-click=""> 
        <div class="item-heading"> 
         <h3>{{site.name}}</h3> 
         <p>Address: {{site.address}}</p> 
         <a href="#" class="paulund_modal">Click Here</a> 
        </div> 
        <installationsite-panels ng-controller="PanelController as panel"></installationsite-panels> 
       </div> 
      </div> 
     </div> 
    </div> 


     <script> 
        $(document).ready(function(){ 
        $('.paulund_modal').paulund_modal_box(); 
        }); 
     </script> 
</body>

주 this tutorial를 사용하여, 하단에 모달 상자를 호출하는 자바 스크립트 함수 :

은 여기 내 메인 페이지의 모습입니다.

저는 지난 며칠 동안 다른 웹 사이트에서 작동하는 모달을 얻기 위해 다른 튜토리얼을 시도했지만 성공하지 못했습니다. 내 생각에 Angular와 Javascript에 대한 일반적인 이해가 부족한 것 같습니다.
어쨌든 나는이 튜토리얼을 JQuery를 사용하여 작동하도록 만들었고, 링크를 클릭하면 모달이 예상대로 열린다.

그러나 여기서는이 모달을 호출하고 싶지 않습니다.

이

장치가

<div> 
    <div class="device-icon-group"> 
     <div class="device-type1-icons" ng-click="panel.showDevices(3)" ng-show="showtype1Red"><img src="img/type1red.png" style="width:50%; height:50%;"/></div> 
     <div class="device-type2-icons" ng-click="panel.showDevices(3)" ng-show="showType2Red"><img src="img/type2red.png" style="width:50%; height:50%;" /></div> 
    </div> 
    <div class="service" ng-click="panel.showDevices(3)" ng-show="showService"> 
     <b>{{panel.getServiceDeviceCount()}} device needs servicing</b> 
    </div> 
    <div ng-show="showServiceList"> 
     <device-list-service></device-list-service> 
    </div> 
</div>

이 지침 <device-list-service> 쇼 상태 :이처럼 보이는 위의 코드에 <installationsite-panels> 지시에 내장 된 것 지시어 (단 하나의 섹션이 여기에 표시)에서 호출 할 그래서 같은 항목의 목록 :

<div ng-controller="DevicesController as deviceList" font-size:1em > 
     <div id="device-list-group"> 
      <div id="device-list-group-item" ng-click="" ng-repeat="device in deviceList.devicesService"> 
       <div ng-class="device.status"><img src="{{(device.type == 'type1') ? 'img/type1white.png' : 'img/type2white.png'}}"> </div> 
       <div class="device-params"> 
        <b>ID:  </b> {{device.id}}<br /> 
        <b>Type:  </b> {{device.type}} 
       </div> 
       <div class="device-params"> 
        <b>Location: </b> {{device.location}}<br /> 
        <b>Action: </b> {{device.action}} <br /> 
       </div> 

      </div> 
     </div> 
    </div>

나는 사용자가 list-group-item 년대 중 하나를 클릭 할 때 모달을 보여주고, 해당 항목에 관한 일부 데이터를 표시합니다.

모달은 기본 앱의 최상위 레벨에서 정상적으로 작동하지만 모든 지시문 내에서 호출 할 수는 없습니다. 어떻게해야합니까?

내 JQuery 모달을 스크랩하고 Angular 방식으로 수행해야합니까, 지난 몇 번의 시도에서 저에게 효과가 없었습니다.

출처

2014-12-09 bot_bot

jquery 모달을 사용하지 마십시오. 할 수는 있지만 그렇게해서는 안됩니다. https://angular-ui.github.io/

두 번째 대안 : 당신이 각도 UI를 좋아하지 않는 경우, 다음 AngularJS와 + 부트 스트랩을 사용하고 만들 사용자 정의 지시

대신에, 나는 꽤 사용할 수 modal 구현이 각도 UI를 사용하는 것이 좋습니다

세 번째 대안 : jQuery를 사용하십시오.

당신은 여전히에 대한 내 충고에도 불구하고, 제 3의 대안으로 가고 싶은 경우, 여기에 당신은 그것을 할 방법 :

var app = angular.module('app', []); 
app.directive('modal', function($http, $timeout) { 
     return { 
      restrict: 'A', 
      link: function(scope, element, attr) { 
       $timeout(function() { 
        element.paulund_modal_box(); 
       }, 0, false); 
      } 
     }; 
});

사용법 :

<div modal></div>

이 일부 설명이 여기에 필요 .

왜 $ timeout 서비스가 필요합니까? jQuery 플러그인은 제대로 작동하려면 DOM을 완전히로드해야하는 경우가 있습니다. 이것이 대부분의 jQuery 플러그인이 $ (document) .ready 블록 안에 싸여있는 이유입니다. AngularJS에는 DOM 준비에 대한 개념이 없으므로 AngularJS에서 이벤트에 쉽게 연결할 수있는 방법이 없습니다. 그러나 잘 알려진 해킹은 $ timeout 서비스를 사용하는 것입니다.

1. compile - Angular walks the DOM tree looking for directives 
2. Link - Angular calls the link function for each directive to setup watch handlers. 
3. Render - Angular updates the views

링크 기능은 현재 폐쇄가 실행을 완료 할 때까지 실행될 $ 시간 제한 기능을 큐에서 $ 제한 시간을 사용 : 각도에서 세 가지 단계가있다. 렌더링 단계가 현재 클로저의 실행 범위 내에있는 것은 너무도 당연한 일입니다. 따라서 $ timeout 함수는 DOM이로드 된 렌더링 단계 이후에 실행됩니다.

출처

2014-12-09 10:39:51 pixelbits

jquery를 사용하기 전에 순수 각도 루트를 다시 시도해 보겠습니다. –

나는 당신의 대답을 가장 포괄적 인 것으로 받아 들였고, 나는 그것을 결국 알아 냈습니다. bootstrap.ui와 호환되지 않는 버전의 각도를 사용하고있는 것으로 나타났습니다. 이제 모달 크기를 늘릴 때 또 다른 문제가 있습니다. 수평 방향으로 중심을 맞추려면 음수 % 값을 사용해야합니다. 그래도 다른 질문을 할 수 있습니다. 도움을 주셔서 감사합니다 –

ui.bootstrap 모달을 구현할 때 호환되지 않는 버전의 Angular를 사용하고있었습니다. 이제 작동 중입니다. –

그런 식으로 JQuery와 Angular를 섞으면 약간 지저분하지만 때로는 잘 만들어진 구성 요소를 사용하고 싶어합니다. Angle - angular-modal에서 유사한 모달을 찾으려고 시도하거나 Angular 지시문 자체에 구성 요소를 빌드 할 수 있습니다. - jQuery Plugins in AngularJS

출처

2014-12-09 10:14:36

THanks for this, 나는 그것을 조사 할 것이다. –

angularjs 지시문에서 JQuery 플러그인을 사용할 수 있습니까?

답변

관련 문제