Passer les paramètres de la directive au rappel

Je suis en train de définir une directive sortable qui enveloppe jqueryui sortable plugin.

L'angle de code est:

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

Le code html est:

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

Le code de MyCtrl:

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

Je veux obtenir le startIndex et endIndex dans mon rappel updateOrders et faire quelque chose avec eux, mais elle imprime:

undefined, undefined

Comment passer ces paramètres à mes rappels? Mon approche correcte?

source d'informationauteur Freewind

  1. 16

    scope.$apply accepte la fonction ou de la ficelle.
    Dans ce cas, utilisez la fonction serait plus simple:

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

    N'oubliez pas de modifier votre code html:

    <ol sortable onStop="updateOrders">

    (Supprimé la ())

  2. 19

    Ce violon montre chaude de rappel d'une directive, d'un passage de paramètres. Astuce consiste à utiliser les possibilités de passer d'une fonction.
    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);};
}

    Ensuite le code html ressemble par exemple:

    <button callback='cb'>Callback</button>
  3. 13

    Alternative 1

    Si vous n'avez pas d'isoler le champ d'application de cette directive, je voudrais utiliser le $parse service:

    Dans le contrôleur: 

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

   ...some code here...

}

    Dans la vue: 

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

    Dans la directive:

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

    La variante 2

    Maintenant, si vous avez un isolat de portée, vous pouvez passer des paramètres à une carte. Si votre directive est définie comme ceci:

    scope: { paginateFn: '&' },

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

    prenant @Pierre Kriens answser plus loin, vous pouvez seulement de vérifier le nom de l'un sur l'étendue et de l'appeler directement. 

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