javascript - instalar - Cómo usar jQuery en AngularJS

usar jquery en angular 6

Question

Estoy tratando de usar la interfaz de usuario jQuery simple. He incluido todo y tengo este sencillo script:

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

y

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

Mi incluye:

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

Pero cuando abro la página no hay control deslizante. De acuerdo con la documentación de angular:

Si jQuery está disponible, angular.element es un alias para la función jQuery. Si jQuery no está disponible, angular.element delega en el subconjunto incorporado de Angular de jQuery.

Sin embargo, realmente no entiendo cómo puedo usar angular.element y no hay ningún ejemplo.

Actualización: Logré tener el control deslizante en la pantalla pero no funciona, no puedo cambiar los valores o hacer algo con él.

Answer 1

Esto debería estar funcionando. Por favor, eche un vistazo a este violín .

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

Asegúrese de cargar las bibliotecas en este orden: jQuery, jQuery UI CSS, jQuery UI, AngularJS.

Answer 2

La mejor opción es crear una directiva y ajustar las funciones del control deslizante allí. El secreto es use $ timeout, se llamará al código jquery solo cuando DOM esté listo.

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

Answer 3

Lo ideal es que lo pongas en una directiva, pero también puedes ponerlo en el controlador. 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();
  });

El enfoque directivo:

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

También recomendaría consultar el código fuente de Angular Bootstrap: https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js

También puede usar una fábrica para crear la directiva. Esto le brinda la máxima flexibilidad para integrar los servicios a su alrededor y las dependencias que necesite.

Answer 4

Tienes que hacer un enlace en una directiva. Mira este:

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

Esto le muestra un ejemplo de un rango de control deslizante, hecho con jQuery UI. Ejemplo de uso:

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