web-dev-qa-db-fra.com

Comment utiliser jQuery dans AngularJS

J'essaie d'utiliser une interface utilisateur jQuery simple. J'ai tout inclus et j'ai ce script simple:

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

et

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

Mon comprend:

<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>

Mais lorsque j'ouvre la page, il n'y a pas de curseur. Selon la documentation de angular:

Si jQuery est disponible, angular.element est un alias de la fonction jQuery. Si jQuery n'est pas disponible, angular.element délègue au sous-ensemble intégré de AngQ de jQuery.

Cependant, je ne comprends pas vraiment comment utiliser angular.element et il n'y a pas d'exemple.

Mise à jour: J'ai réussi à avoir le curseur à l'écran mais cela ne fonctionne pas, je ne peux pas changer les valeurs ou faire quelque chose avec.

enter image description here

javascriptjqueryangularjs
55
Avraam Mavridis

Idéalement, vous devriez mettre cela dans une directive, mais vous pouvez aussi simplement le mettre dans le contrôleur. 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();
  });

L'approche directive:

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);
            });
         }
      }
  });

Je recommanderais également de consulter le code source de Angular Bootstrap: https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js

Vous pouvez également utiliser une fabrique pour créer la directive. Cela vous donne une flexibilité ultime pour intégrer les services autour de vous et toutes les dépendances dont vous avez besoin.

44
cameronroe

Cela devrait fonctionner. S'il vous plaît jeter un oeil à ce violon .

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

Assurez-vous de charger les bibliothèques dans cet ordre: jQuery, CSS jQuery UI, interface utilisateur jQuery, AngularJS.

7
Alethes

Vous devez faire contraignant dans une directive. Regarde ça:

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]);                    
            };            
        }
    };
});

Ceci vous montre un exemple de plage de curseur réalisée avec jQuery UI. Exemple d'utilisation:

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

La meilleure option est de créer une directive et d’envelopper les fonctionnalités du curseur. Le secret est d'utiliser $ timeout, le code jquery ne sera appelé que lorsque DOM est prêt.

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();                    
                });
            }
        };
    }]
);
1
Jorge Alberto