12

sortablejqueryui のソート可能なプラグインをラップするディレクティブを定義しようとしています。

角度コードは次のとおりです。

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);
    }
}

コールバックでstartIndexandを取得して何かを実行したいのですが、次のように出力されます。endIndexupdateOrders

undefined, undefined

これらのパラメータをコールバックに渡す方法は? 私のアプローチは正しいですか？

4

4 に答える 4

19

このフィドルは、パラメータを渡すディレクティブからのホット コールバックを示しています。主なトリックは、スコープを使用して関数を渡すことです。 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>
于 2012-12-13T08:50:55.240 に答える
16

scope.$apply関数または文字列を受け入れます。この場合、関数の使用はより簡単になります。

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

HTMLコードを次のように変更することを忘れないでください。

<ol sortable onStop="updateOrders">

（削除()）

于 2012-10-09T23:57:14.930 に答える
0

@Peter Kriens answserをさらに一歩進めると、スコープのaの名前を確認して、直接呼び出すことができます。

var myApp = angular.module('myApp', []).
directive('anyOldDirective', function() {
    return { 
        link: function(scope, element) {
            element.bind('click', function() {
                if (scope.wellKnownFunctionName) {
                      scope.wellKnownFunctionName('calling you back!'); 
                } else {
                      console.log("scope does not support the callback method 'wellKnownFunctionName');
                }
            })
        }
    };
})

function MyCtrl($scope) {
    $scope.wellKnownFunctionName= function(a) {console.log(a);};
}
于 2013-01-18T07:02:12.603 に答える