Я пытаюсь реализовать анимацию slideDown/slideUp с помощью AngularJS. Я не могу использовать переход CSS3 (к сожалению), поскольку для параметра height
установлено значение auto
(и я не хочу использовать обходное решение max-height
), поэтому я пытаюсь использовать метод jQuery slideToggle
.
Учитывая следующую разметку:
<ul>
<li ng-repeat="entry in data">
<span>{{entry.title}}</span>
<a ng-click="clicked($event)" href>more?</a>
<p>{{entry.description}}</p>
</li>
</ul>
В моем контроллере был реализован следующий метод:
$scope.clicked = function($event) {
var a = jQuery($event.target);
var p = a.next();
p.slideToggle();
};
Даже если это работает так, как ожидалось, я понял, что изменение DOM должно выполняться исключительно в рамках директив.
После того, как я прочитал документацию AngularJS (которую я нахожу немного светлым IMHO), директивы все еще немного расплывчаты для меня, так что кто-нибудь скажет мне, относится ли следующая директива к наилучшим оценкам Privity AngularJS или нет?
.directive('testDirective', [
function() {
return {
restrict: 'A',
scope: {
entry: '=testDirective'
},
template: '<span>{{entry.title}}</span> ' +
'<a ng-click="clicked($event)" href>more?</a>' +
'<p>{{entry.description}}</p>',
link: function(scope, element) {
var p = jQuery(element.find('p'));
scope.clicked = function($event) {
p.slideToggle();
};
}
};
}])
Можно ли улучшить? Можно ли использовать jQuery в директиве? Означает ли это разделение проблем?