我对下面的场景感到困惑。假设有一个包含行的表。当用户单击表中的按钮时,我希望用户表单使用jQuery向下滑动,并显示带有所选行值的表单。以下是我目前正在做的不太有意义的事情:
<<p> 视图/strong><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事件已经完成。在这种情况下,我很可能想要阻止滑升操作。
我只使用了AngularJS大约一个星期,所以我确信我错过了一些东西。
当然,这是一个常见的问题…有一种方法可以解决这个问题:基本上在指令中使用一个布尔值和一个$watch来触发表单的切换。除此之外,你只需要在表单上设置一个变量来编辑你想要编辑的对象。
下面是一些伪代码的总体思路:
//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>