如何在AngularJs中执行UIKit事件

Question

我在我的网站中使用了UIKit中的Sortable组件。我已经完成了它的工作，现在当我移动一个图标时，我将使用事件来执行某些事情。该事件被称为change.uk.sortable。

使用jQuery你可以把它叫做：

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


    }); 
}); 

我怎样才能做到在AngularJS这样的事情？

Answer 1

您可以使用一个指令（这是更多的AngularJS方式），或者因为你必须包含jQuery for uiKit，你可以使用jQuery，就像你的问题一样。

无论使用哪种方法，如果您想更新范围属性，则需要在$scope.apply()函数中包装。

指令版本：

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> 

非指导版本：

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> 

演示了两个版本：http://jsfiddle.net/s9fr43of/1/