Using jQuery Light slider with angular?

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) {
       // some controller code goes here
        $scope.items = function(){
           return $scope.items;
        }

     }], //Embed a custom controller in the directive
     link: domManipulation
    }
      function domManipulation(scope, element, attrs) {

         scope.items = // returned json from API;
         function createSlider(){
          try{
           scope.itemsSlider.destroy();
          }catch (error){
           console.log(error);
          }
          scope.itemsSlider = $('#items').lightSlider({
           item    : 10,
           autoWidth: false,
           slideMove: 1, // slidemove will be 1 if loop is true
           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>
+4
source share
1 answer
<ul class="available-items">
    <li ng-repeat="item in items" ng-click="$parent.flavor = 'item.flavor'">
    {{ item.name }}
</li>
</ul>
0
source

Source: https://habr.com/ru/post/1624202/


All Articles