How to execute UIKit event in AngularJs

Question

I've used the Sortable component from UIKit in my website. I've made it work and now I will be using the event to execute something when ever I move an icon. The event is called change.uk.sortable.

Using jQuery you can call it by:

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


    });
});

How can I do something like this in AngularJS?

May be without using jQuery: document.getElementById('sample').addEventListener('change.uk.sortable', function() {...}) — Ivan Minakov
– Ivan Minakov, Commented Aug 25, 2017 at 5:44

K Scandrett · Accepted Answer · 2017-08-30 14:05:30Z

1

+100

You can either use a directive (which is more the AngularJS way), or since you have to include jQuery for uiKit, you could just use jQuery, as in your question.

Either way you'll need to wrap in a $scope.apply() function if you want to update scope properties.

Directive 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>

Non-directive 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 for both versions: http://jsfiddle.net/s9fr43of/1/

edited Aug 30, 2017 at 14:05

answered Aug 30, 2017 at 13:59

K Scandrett

16.6k4 gold badges43 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stuart Over a year ago

Hi, this is already OK. But can I just request for one code please. I also want to know where i drop the icon so that I can update the database the new arrangement. Thank you in advance.

K Scandrett Over a year ago

Have a look at the saveOrdering function in codepen.io/malles/pen/pvLOyb for the basic idea

Collectives™ on Stack Overflow

How to execute UIKit event in AngularJs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related