如何使用jQuery在AngularJS [英] How to use jQuery in AngularJS

问题描述

我试图用简单的jQuery UI的。我已经包括了一切，我有这个简单的脚本：

I am trying to use simple jQuery UI. I've included everything and I have this simple script:

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

但是，当我打开的页面没有滑块。据角文档：

But when I am opening the page there is no slider. According to documentation of angular:

如果jQuery是可用的，angular.element是jQuery的别名
  功能。如果jQuery是不可用，angular.element与会代表
  棱角分明的内置的jQuery的子集。

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery.

不过，我真的不明白我怎么可以使用 angular.element 并没有例子。

However, I don't really understand how can I use angular.element and there is no example.

更新：我设法在屏幕上滑动，但它不工作，我不能改变数值或用它做什么

Update: I managed to have the slider on the screen but it does not work, I cannot change values or do something with it.

推荐答案

在理想情况下，你会提出，在一条指令，但你也可以把它放在控制器。 http://jsfiddle.net/tnq86/15/

Ideally you would put that in a directive, but you can also just put it in the controller. 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);
            });
         }
      }
  });

我也建议检查出角引导的源$ C ​​$ C：
<一href=\"https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js\">https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js

您也可以使用一个工厂来创建的指令。这给了你最大的灵活性，以服务整合绕过它，无论你需要的依赖关系。

You can also use a factory to create the directive. This gives you ultimate flexibility to integrate services around it and whatever dependencies you need.

这篇关于如何使用jQuery在AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！