Problème sélectionnable jquery-ui angulaire dans la portée

Question

J'utilise jquery-ui sélectionnable avec angulaire pour sélectionner des cellules dans la grille de tableau et transmettre ces données sélectionnées au contrôleur anulaire. les lignes et les colonnes sont répétées en utilisant ng-repeat angulaire. les lignes répètent les jours et les colonnes répètent les pièces. Lorsque vous sélectionnez en faisant glisser sur la grille, il prend les données (salle sélectionnée et dates sélectionnées) dans la directive. quand je console le journal dans la directive je peux voir la pièce choisie et les jours choisis. mais comment puis-je accéder à ces données dans mon contrôleur. Mon code est le suivant.

<table cellpadding="10" id="table1"> 

      <tbody> 
       <div > 
        <tr ng-repeat="room in rooms" ui-selectable doc-array="rooms" class="roomContainer" > 

          <td ng-repeat="day in room.days" class="parent" ng-mouseup="reserve3()" > 
                 {{day.no}}   
          </td> 

        </tr> 
       </div> 
      </tbody> 
     </table> 

directive

angular.module('myApp') 
    .directive('uiSelectable', function(){ 

    return { 
     scope:false, 
     link: function(scope, element, attrs){ 
scope.$on('clearselection', function (event, document) { 
      element.find('.ui-selected').removeClass('ui-selected') 
     }); 




      element.selectable({ 
       stop: function (evt, ui) { 
        console.log(evt); 
        scope.selectedDays =[]; 
        var collection = scope.$eval(attrs.docArray) 
        var selected = element.find('td.parent.ui-selected').map(function() { 
         var idx1 = $(this).index(); 
         console.log(idx1); 
         element.find('td.parent.ui-selected').parent().map(function() { 
          var idx2 = $(this).index(); 
           console.log(idx2); 
           //console.log(scope.DataList) 
           scope.selectedDays.push(scope.rooms[idx2].days[idx1]); 
           scope.selectedRoom = scope.rooms[idx2]; 
           scope.kkk = 'testing 123 ..............'; 
           scope.$apply(); 

           console.log(scope.selectedRoom); 
           console.log(scope.selectedDays); 

          }).get(); 

        }).get(); 

       } 
      }); 




} 
} 


}); 

Contrôleur

var app = angular.module('myApp', ['ngAnimate', 'ui.bootstrap']); 
app.controller('myCtrl', function($scope, $timeout) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 


    var days1 = [{no: 1, clicked: false,count:0}, {no:2, clicked: false,count:0}, {no:3, clicked: false,count:0}, {no:4,clicked: false}, {no:5}, {no:6}, {no:7}, {no:8},{no: 9}, {no:10}, {no:11}, {no:12}, {no:13}, {no:14}, {no:15}, {no:16} ,{no: 17}, {no:18}, {no:19}, {no:20}, {no:21}, {no:22}, {no:23}, {no:24},{no: 25}, {no:26}, {no:27}, {no:28}, {no:29}, {no:30}, {no:31}]; 
    var days2 = [{no: 1, clicked: false, count: 0}, {no:2, clicked: false,count: 0}, {no:3,clicked: false,count:0}, {no:4, clicked: false}, {no:5}, {no:6}, {no:7}, {no:8},{no: 9}, {no:10}, {no:11}, {no:12}, {no:13}, {no:14}, {no:15}, {no:16} ,{no: 17}, {no:18}, {no:19}, {no:20}, {no:21}, {no:22}, {no:23}, {no:24},{no: 25}, {no:26}, {no:27}, {no:28}, {no:29}, {no:30}, {no:31}]; 
    var days3 = [{no: 1, clicked: false,count:0}, {no:2, clicked: false,count:0}, {no:3, clicked: false, count:0}, {no:4, clicked: false, count:0}, {no:5}, {no:6}, {no:7}, {no:8},{no: 9}, {no:10}, {no:11}, {no:12}, {no:13}, {no:14}, {no:15}, {no:16} ,{no: 17}, {no:18}, {no:19}, {no:20}, {no:21}, {no:22}, {no:23}, {no:24},{no: 25}, {no:26}, {no:27}, {no:28}, {no:29}, {no:30}, {no:31}]; 
    var days4 = [{no: 1, clicked: false, count:0}, {no:2, clicked: false,count:0}, {no:3, clicked: false, count:0}, {no:4, clicked: false, count:0}, {no:5}, {no:6}, {no:7}, {no:8},{no: 9}, {no:10}, {no:11}, {no:12}, {no:13}, {no:14}, {no:15}, {no:16} ,{no: 17}, {no:18}, {no:19}, {no:20}, {no:21}, {no:22}, {no:23}, {no:24},{no: 25}, {no:26}, {no:27}, {no:28}, {no:29}, {no:30}, {no:31}]; 



    $scope.rooms = [ 
     { name: '101', age: 23 , days:days1 }, 
     { name: '102', age: 23 , days:days2 }, 
     { name: '103', age: 23 , days:days3}, 
     { name: '104', age: 23 , days:days4} 
    ]; 

    $scope.years = ['2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']; 
    $scope.months = ['1','2','3','4','5','6','7','8','9','10','11','12']; 


    $scope.selectedDays = []; 
    $scope.selectedRoom = {}; 
    $scope.kkk = ''; 

    $scope.selectedYear ='2016'; 
    $scope.selectedMonth = '1'; 

    var clicked = true; 
    var count =0 ; 


    $scope.getMonthDays = function(){ 

     var y= $scope.selectedYear; 
     var m= $scope.selectedMonth; 
     var days = new Date(y, m, 0).getDate(); 
     var days1 = []; 

     for(var i=0; i< days; i++){ 
       var day= { 
       no: i+1 
       }; 
       days1.push(day); 
     } 

     console.log(days1); 

     for(var j=0; j<$scope.rooms.length; j++){ 
     $scope.rooms[j].days = days1; 
     } 

    }; 


    $scope.reserve3 = function(){ 

     console.log($scope.selectedRoom); 


     $timeout(function() { 
       $scope.open('lg'); 
       console.log($scope.selectedRoom); 
       console.log($scope.kkk); 
      }, 1000); 


     console.log('opening'); 



    }; 



}); 

Answer 1

résolu en utilisant le déplacement ui-selectable doc-array="rooms" à étiquette de table.

<table cellpadding="10" id="table1" ui-selectable doc-array="rooms"> 

      <tbody> 

        <tr ng-repeat="room in rooms" class="roomContainer" > 

          <td ng-repeat="day in room.days" class="parent" ng-mouseup="reserve3()" > 
                 {{day.no}}   
          </td> 

        </tr> 

      </tbody> 
     </table>