Wie UIKit Ereignis in AngularJs auszuführen

Question

Ich habe die sortierbare Komponente von UIKit in meiner Website verwendet. Ich habe es funktioniert und jetzt werde ich das Ereignis verwenden, um etwas auszuführen, wenn ich ein Symbol bewege. Das Ereignis heißt change.uk.sortable.

Mit jQuery können Sie es nennen von:

$(document).ready(function() { 
    $("#sample").on("change.uk.sortable", function() { 


    }); 
}); 

Wie kann ich etwas tun in AngularJS?

Answer 1

Sie können entweder eine Direktive verwenden (was mehr die AngularJS-Methode ist), oder da Sie jQuery für uiKit einschließen müssen, können Sie einfach jQuery verwenden, wie in Ihrer Frage.

In beiden Fällen müssen Sie in eine $scope.apply()-Funktion umbrechen, wenn Sie die Bereichseigenschaften aktualisieren möchten.

Richtlinie Version:

var app = angular.module('App', []); 

app.controller('AppCtrl', function($scope) {  
    $scope.movedItemDirectiveVersion = "No item has been moved yet...";  
}); 

app.directive("mySortable", function() { 
    return { 
    restrict: 'A', 
    link: function(scope, elem, attrs) { 
     elem.on('change.uk.sortable.mySortable', function(event, sortableObj, element, action) { 
     scope.$apply(function() { 
      scope.movedItemDirectiveVersion = "You moved " + element[0].innerText; 
     }); 
     }); 
     // clean up when scope is destroyed 
     scope.$on("$destroy", 
     function() { 
      elem.off("change.uk.sortable.mySortable"); 
     } 
    ); 
    } 
    } 
}); 

<ul class="uk-sortable uk-grid uk-grid-small uk-grid-width-1-5" data-uk-sortable="" my-sortable> 
    <li class="uk-grid-margin" style=""> 
    <div class="uk-panel uk-panel-box">Item 1</div> 
    </li> 
    <li class="uk-grid-margin" style=""> 
    <div class="uk-panel uk-panel-box">Item 2</div> 
    </li> 
</ul> 

Nicht-Richtlinie Version:

var app = angular.module('App', []); 

app.controller('AppCtrl', function($scope) { 
    $scope.movedItem = "No item has been moved yet..."; 

    $('#withoutDirective').on("change.uk.sortable", function(event, sortableObj, element, action) { 
    $scope.$apply(function() { 
     $scope.movedItem = "You moved " + element[0].innerText; 
    }); 
    }); 
}); 

<ul id="withoutDirective" class="uk-sortable uk-grid uk-grid-small uk-grid-width-1-5" data-uk-sortable=""> 
    <li class="uk-grid-margin" style=""> 
    <div class="uk-panel uk-panel-box">Item 1</div> 
    </li> 
    <li class="uk-grid-margin" style=""> 
    <div class="uk-panel uk-panel-box">Item 2</div> 
    </li> 
</ul> 

Demo für beide Versionen: http://jsfiddle.net/s9fr43of/1/