Question

首先查看代码，然后从此网址http://jsfiddle.net/tnq86/15/

中获取代码

<div ng-app="App">
   <div ng-controller="AppCtrl">
       <!-- Bind our slide model -->
       <h3>{{model}}</h3>
       <div id="slider"></div>
   </div>    
</div>

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

我正在尝试学习角度js代码。在上面的代码中有一个控制器和一个控制器可能有很多功能。上面的控制器有一个名为initSlider() and initSlider()的函数，函数有一个名为onSlide()的子函数

只是不明白以下行

              $scope.$slider = $('#slider').slider({
                  slide: $scope.onSlide
              });

什么是$scope.$slider ?任何类型的函数都试图创建名为$ slider的？谁将致电$slider function ?

此线幻灯片的含义是什么：$scope.onSlide ?

也见下面的代码

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

如何将值传递给onSlide

的e and ui ?函数

$scope.$digest()行的含义及其作用是什么？

如何从控制器外部调用控制器中声明的任何函数.......需要示例代码。

感谢

粘贴完整代码

@charlietfl给出的以下代码，我只是粘贴它。谢谢@charlietfl

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js" data-semver="1.4.6"></script>

  <script>
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.model = 0;
    })

    app.directive('jqSlider', function() {
      return {
        link: function(scope, element, attrs) {
          element.slider({
            slide: onSlide
          });

          function onSlide(e, ui) {
            scope.model = ui.value;
            scope.$digest();
          }
        }
      };
    });
  </script>
</head>

<body ng-controller="MainCtrl">
  <!-- Bind our slide model -->
  <h3>{{model}}</h3>
  <div id="slider" jq-slider></div>
</body>

</html>

Answer 1

这是在angular中使用jQuery的可怕的示例。

DOM代码不属于控制器，应该在指令中。因此没有理由将jQuery对象或插件回调附加到$scope。

控制器在视图编译之前运行。 Angular需要完整的范围才能生成视图

初始化jQuery插件的正确方法是在一个指令中。这是在初始化jQuery插件代码时确保元素存在的唯一方法。

$(document).ready在角度应用中没有任何价值。 Angular不会在ready之前解析dom，并且大多数时候，当你第一次加载时，你想要定位的元素都不存在

该示例的另一个缺陷是jQuery在angular之后加载，因此angular不能在angular.element

内部使用jQuery或它的插件

这是一个更合适的使用指令

app.directive('jqSlider', function() {
  return {
    link: function(scope, element, attrs) {
      // when jQuery loads before angular, `element` is a jQuery object
      element.slider({
        slide: onSlide
      });
      // function does not need to be attached to or pollute scope
      function onSlide(e, ui) {
        scope.model = ui.value;
        // scope updated outside of angular, tell angular to update view
        scope.$digest();
      }
    }
  };
});

查看使用：

<div jq-slider></div>

$digest()的原因是任何更改范围之外的范围的事件都需要通知angular在更改范围后运行摘要以更新视图

请注意，在演示中，jQuery在angular.js之前加载。

的 DEMO

需要了解与jquery混合的angular js代码

粘贴完整代码

1 个答案: