сначала посмотрите код и код, взятый с этого 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>
Это ужасный пример использования 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.
$( document ).ready(function(){})
в угловых js $( document ).ready(function() { console.log( "ready!" ); });