각도에서의 jQuery 사용 방법JS

각도에서의 jQuery 사용 방법JS

간단한 jQuery UI를 사용하려고 합니다.모든 것을 포함했습니다.심플한 스크립트는 다음과 같습니다.

<script>
  $(function() {
    $( "#slider" ).slider();
  });
</script>

그리고.

<div id="slider"></div>

다음과 같은 것이 있습니다.

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/ayaSlider.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

하지만 페이지를 열면 슬라이더가 없습니다.각도에 대한 설명서에 따르면:

jQuery를 사용할 수 있는 경우 angular.element는 jQuery 함수의 별칭입니다.jQuery를 사용할 수 없는 경우 angular.element는 Angular의 내장된 jQuery 서브셋으로 위임합니다.

하지만, 어떻게 해야 하는지 잘 모르겠어요.angular.element예시는 없습니다.

업데이트: 슬라이더는 화면에 표시되지만 작동하지 않습니다.값을 변경하거나 다른 작업을 할 수 없습니다.

이상적으로는 명령어에 넣을 수 있지만 컨트롤러에 넣을 수도 있습니다.http://jsfiddle.net/tnq86/15/

  angular.module('App', [])
    .controller('AppCtrl', function ($scope) {

      $scope.model = 0;

      $scope.initSlider = function () {
          $(function () {
            // wait till load event fires so all resources are available
              $scope.$slider = $('#slider').slider({
                  slide: $scope.onSlide
              });
          });

          $scope.onSlide = function (e, ui) {
             $scope.model = ui.value;
             $scope.$digest();
          };
      };

      $scope.initSlider();
  });

지시적 접근법:

HTML

<div slider></div>

JS

  angular.module('App', [])
    .directive('slider', function (DataModel) {
      return {
         restrict: 'A',
         scope: true,
         controller: function ($scope, $element, $attrs) {
            $scope.onSlide = function (e, ui) {
              $scope.model = ui.value;
              // or set it on the model
              // DataModel.model = ui.value;
              // add to angular digest cycle
              $scope.$digest();
            };
         },
         link: function (scope, el, attrs) {

            var options = {
              slide: scope.onSlide  
            };

            // set up slider on load
            angular.element(document).ready(function () {
              scope.$slider = $(el).slider(options);
            });
         }
      }
  });

또, Angular Bootstrap의 소스 코드도 확인해 주세요.https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js

팩토리를 사용하여 디렉티브를 작성할 수도 있습니다.이것에 의해, 그 주변 서비스나 필요한 의존 관계를 통합할 수 있는 최고의 유연성을 얻을 수 있습니다.

잘 될 거야.이 바이올린을 보세요.

$(function() {
   $( "#slider" ).slider();
});//Links to jsfiddle must be accompanied by code

라이브러리를 jQuery, jQuery UI CSS, jQuery UI, Angular 순으로 로드해야 합니다.JS.

명령어로 바인딩을 해야 합니다.이것 좀 봐.

angular.module('ng', []).
directive('sliderRange', function($parse, $timeout){
    return {
        restrict: 'A',
        replace: true,
        transclude: false,
        compile: function(element, attrs) {            
            var html = '<div class="slider-range"></div>';
            var slider = $(html);
            element.replaceWith(slider);
            var getterLeft = $parse(attrs.ngModelLeft), setterLeft = getterLeft.assign;
            var getterRight = $parse(attrs.ngModelRight), setterRight = getterRight.assign;

            return function (scope, slider, attrs, controller) {
                var vsLeft = getterLeft(scope), vsRight = getterRight(scope), f = vsLeft || 0, t = vsRight || 10;                        

                var processChange = function() {
                    var vs = slider.slider("values"), f = vs[0], t = vs[1];                                        
                    setterLeft(scope, f);
                    setterRight(scope, t);                    
                }                 
                slider.slider({
                    range: true,
                    min: 0,
                    max: 10,
                    step: 1,
                    change: function() { setTimeout(function () { scope.$apply(processChange); }, 1) }
                }).slider("values", [f, t]);                    
            };            
        }
    };
});

jQuery UI를 사용한 슬라이더 범위의 예를 보여 줍니다.사용 예:

<div slider-range ng-model-left="question.properties.range_from" ng-model-right="question.properties.range_to"></div>

가장 좋은 옵션은 디렉티브를 생성하여 슬라이더 기능을 랩하는 것입니다.비밀은 $timeout을 사용하는 것입니다.jquery 코드는 DOM이 준비되었을 때만 호출됩니다.

angular.module('app')
.directive('my-slider', 
    ['$timeout', function($timeout) {
        return {
            restrict:'E',
            scope: true,
            template: '<div id="{{ id }}"></div>',
            link: function($scope) {
                $scope.id = String(Math.random()).substr(2, 8);

                $timeout(function() {
                    angular.element('#'+$scope.id).slider();                    
                });
            }
        };
    }]
);

언급URL : https://stackoverflow.com/questions/22666289/how-to-use-jquery-in-angularjs