我的问题基于以下代码集:http://codepen.io/ionic/pen/JsHjf
它使用:<ion-reorder-button class="ion-navicon" on-reoder="moveItem(item, fromIndex, toIndex)"></ion-reorder-button>
,它工作得很好。
我想将整个<ion-item>
移动到指令中。这是我的plnkr:http://plnkr.co/edit/w61yqfuCypliugToUD3E?p=preview和一些基本的代码部分:
directive("myitem", function() {
return {
restrict : "E",
scope : {
item : "=",
onItemDelete : "&",
moveItem : "&"
},
templateUrl : "MyItemTemplate"
}
})
<ion-item>
{{ item.id }}
<ion-delete-button class="ion-minus-circled" ng-click="onItemDelete({'item': item})"></ion-delete-button>
<ion-reorder-button class="ion-navicon" on-reorder="moveItem({'item' : item, 'fromIndex' : fromIndex, 'toIndex' : toIndex})"></ion-reorder-button>
</ion-item>
由于这个问题,我知道如何传递多个参数:AngularJS directive binding a function with multiple arguments
然而 fromIndex 和 toIndex 不会传播
$scope.moveItem = function(item, fromIndex, toIndex) {
console.log("moveItem: ", item, fromIndex, toIndex);
console.log("unfortunately, the fromIndex and toIndex are undefined");
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
};
我试着查看源代码,向上移动到调用堆栈,但我无法发现任何明显的错误。
所以是的,我真的希望将重新排序列表的好处保留在一个单独的指令中。
答案 0 :(得分:0)
在这种情况下,您传递的参数名称很重要。你想拥有:
on-reorder="moveItem(item, $fromIndex, $toIndex)"