将参数从指令传递给回调

Question

我正在尝试定义一个sortable包装jqueryui的可排序插件的指令.

角度代码是:

module.directive('sortable', function () {
    return function (scope, element, attrs) {
        var startIndex, endIndex;
        $(element).sortable({
            start:function (event, ui) {
                startIndex = ui.item.index();
            },
            stop:function (event, ui) {
                endIndex = ui.item.index();
                if(attrs.onStop) {
                    scope.$apply(attrs.onStop, startIndex, endIndex);
                }
            }
        }).disableSelection();
    };
});

html代码是:

<div ng-controller="MyCtrl">
    <ol sortable onStop="updateOrders()">
         <li ng-repeat="m in messages">{{m}}</li>
    </ol>
</div>

代码MyCtrl:

function MyCtrl($scope) {
    $scope.updateOrders = function(startIndex, endIndex) {
        console.log(startIndex + ", " + endIndex);
    }
}

我想在我的回调中得到它startIndex并用它们做一些事情,但它打印出来:endIndexupdateOrders

undefined, undefined

如何将这些参数传递给我的回调？我的方法是否正确？

Answer 1

这个小提琴显示来自传递参数的指令的热回调.主要技巧是使用范围来传递函数. http://jsfiddle.net/pkriens/Mmunz/7/

var myApp = angular.module('myApp', []).
directive('callback', function() {
    return { 
        scope: { callback: '=' },
        restrict: 'A',
        link: function(scope, element) {
            element.bind('click', function() {
                scope.$apply(scope.callback('Hi from directive '));
            })
        }
    };
})

function MyCtrl($scope) {
    $scope.cb = function(msg) {alert(msg);};
}

然后html看起来像例如:

<button callback='cb'>Callback</button>

Answer 2

scope.$apply接受函数或字符串.在这种情况下,使用函数会更简单:

  scope.$apply(function(self) {
    self[attrs.onStop](startIndex, endIndex);
  });

不要忘记将您的HTML代码更改为:

<ol sortable onStop="updateOrders">

(删除了())

Answer 3

备选方案1

如果你没有这个指令的隔离范围,我会使用$ parse服务:

在控制器中:

...
$scope.getPage = function(page) {

   ...some code here...

}

在视图中:

<div class="pagination" current="6" total="20" paginate-fn="getData(page)"></div>

在指令中:

if (attr.paginateFn) {
   paginateFn = $parse(attr.paginateFn);
   paginateFn(scope, {page: 5})
}

备选方案2

现在,如果您有隔离范围,则可以将参数作为命名映射传递给它.如果您的指令定义如下:

scope: { paginateFn: '&' },

link: function (scope, el) {
   scope.paginateFn({page: 5});
}