如何在AngularJS中使用jQuery

Question

我试图使用简单的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,没有例子.

更新:我设法在屏幕上有滑块,但它不起作用,我无法更改值或使用它做一些事情.

Answer 1

理想情况下,你会把它放在一个指令中,但你也可以把它放在控制器中.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

您还可以使用工厂来创建指令.这为您提供了最大的灵活性,可以围绕它集成服务以及您需要的任何依赖项.

Answer 2

这应该有效.请看看这个小提琴.

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

确保按以下顺序加载库:jQuery,jQuery UI CSS,jQuery UI,AngularJS.