大佬教程收集整理的这篇文章主要介绍了angularjs – 如何使用指令在控制器上的元素上切换幻灯片动画？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
视图
<tr ng-click="setItemToEdit(item)" slide-down-form>
…
<form> <input type="test" ng-model={{itemToEdit.Property1}} > <button ng-click=saveEditedItem(item)" slide-up-form> <form>
控制
$scope.itemToEdit = {}; $scope.setItemToEdit = function(item) { $scope.itemToEdit = item; }); $scope.saveEditedItem = function(item) { myservice.add(item); $scope.itemToEdit = {}; }
指令 – 上滑/下滑
var linker = function(scope,element,attrs) { $(form).slideUp(); //or slide down }
似乎我的指令和我的控制逻辑太过断开了.例如,如果存在保存错误会发生什么？表单已隐藏,因为SlideUp事件已完成.在这种情况下,我很可能想要阻止slideUp操作.
这是一些伪代码中的一般概念：
//create a directive to toggle an element with a slide effect.
app.directive('showSlide',function() {
return {
//reStrict it's use to attribute only.
reStrict: 'A',//set up the directive.
link: function(scope,elem,attr) {
//get the field to watch from the directive attribute.
var watchField = attr.showSlide;
//set up the watch to toggle the element.
scope.$watch(attr.showSlide,function(v) {
if(v && !elem.is(':visible')) {
elem.slideDown();
}else {
elem.slideUp();
}
});
}
}
});
app.controller('MainCtrl',function($scopE) {
$scope.showForm = false;
$scope.itemToEdit = null;
$scope.editItem = function(item) {
$scope.itemToEdit = item;
$scope.showForm = true;
};
});
<form show-slide="showForm" name="myForm" ng-submit="saveItem()">
<input type="text" ng-model="itemToEdit.name" />
<input type="submit"/>
</form>
<ul>
<li ng-repeat="item in items">
{{item.namE}}
<a ng-click="editItem(item)">edit</a>
</li>
</ul>
以上是大佬教程为你收集整理的angularjs – 如何使用指令在控制器上的元素上切换幻灯片动画？全部内容，希望文章能够帮你解决angularjs – 如何使用指令在控制器上的元素上切换幻灯片动画？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。