I am missing something that does not allow adding ng-clickto the slider elements. When I add ng-click, it just does not fire the click event, but if I do onClick, it fires. Now it makes me think that this is related to angular areas, but I can tell.
Edit:
Here is the code:
JS
angular.module('sweetItemsDirective',[]).directive('sweetItemsDirective',
['$interval', '$q',
function($interval, $q) {
return {
restrict: 'EA',
transclude: true,
scope: {
items : '&',
},
templateUrl: '/templates/items/default.html',
controller: ['$scope', function($scope) {
$scope.items = function(){
return $scope.items;
}
}],
link: domManipulation
}
function domManipulation(scope, element, attrs) {
scope.items =
function createSlider(){
try{
scope.itemsSlider.destroy();
}catch (error){
console.log(error);
}
scope.itemsSlider = $('#items').lightSlider({
item : 10,
autoWidth: false,
slideMove: 1,
slideMargin: 1,
vertical:true,
verticalHeight:180,
adaptiveHeight:false,
keyPress: true,
controls: false,
pager: false
});
}
}
}]
);
Templates / Elements / default.html
HTML
<sweet-items-directive id="items"></sweet-items-directive>
<div ng-if="items.length > 0">
<button class="button prev">prev</button>
<ul class="available-items">
<li ng-repeat="item in items" ng-click="flavor= item.flavor">
{{ item.name }}
</li>
</ul>
<button class="button next">next</button>
</div>
source
share