Необходимо понимать угловой код js, смешанный с jquery

0

сначала посмотрите код и код, взятый с этого URL- адреса 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() функцию, называемую onSlide()

просто не понимаю нижеприведенную строку

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

что такое $scope.$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="[email protected]" 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>
  • 1
    «Я пытаюсь выучить угловой JS-код» - вы взяли действительно плохой пример для этого. Есть много хороших ресурсов и примеров, но это довольно плохо.
  • 0
    Он передается обычной системой событий браузера / jQuery.
Показать ещё 1 комментарий
Теги:

1 ответ

4
Лучший ответ

Это ужасный пример использования jQuery в угловом режиме.

Код DOM не принадлежит контроллерам и должен находиться в директивах. Таким образом, нет причин присоединять объекты jQuery или обратные вызовы плагинов к $scope.

Контроллеры запускаются до компиляции представления. Угловая потребность в полном объеме, чтобы генерировать представление

Правильный способ инициализации плагина jQuery находится в директиве. Это единственный способ убедиться, что элемент существует, когда инициализируется код плагина jQuery.

$(document).ready не имеет значения в угловых приложениях. Угловое не будет анализировать dom до ready и в большинстве случаев элементы, которые вы хотите настроить, даже не существуют, когда страница загружается первой

Другой недостаток с примером заключается в том, что jQuery загружается после углового, и поэтому угловые не могут использовать jQuery или плагины внутри с angular.element

Это более подходящая директива по использованию

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() заключается в том, что любые события, которые изменяют масштаб за пределами угловой потребности, должны уведомить угловые, чтобы запустить дайджест после изменения области действия, чтобы обновить представление

Обратите внимание, что в демонстрации jQuery загружается до angular.js.

DEMO

Поделиться
  • 0
    Если вы проголосовали против моего ответа - я с этим согласен. После прочтения твоего я бы понизил себя. Тем не менее, я думаю, что имеет смысл иметь его там, как против удаления. Я мог бы отредактировать для ясности этры.
  • 0
    что эквивалентно $( document ).ready(function(){}) в угловых js $( document ).ready(function() { console.log( "ready!" ); });
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню