popup modali della tabella selezionabile in js angolari

Question

Sto tentando di aprire un popup modale con tabella. Come posso fare questo? Nella mia app.js, nell'evento click della riga apri una modale, voglio anche aggiornare alcuni campi con il valore dell'elemento selezionato. Ma non posso aggiornare con il valore selezionato.

my app.js 
var tableApp = angular.module('tableApp', ['ui.bootstrap']); 


tableApp.controller('tableController', function ($scope,$rootScope, $filter, $modal) { 
    $scope.filteredPeople = []; 

    $scope.currentPage = 1; 
    $scope.pageSize = 10; 
    $scope.people = [{ id: "1", name: "joe",disable:true }, 
       { id: "2", name: "bill", disable: true }, 
       { id: "3", name: "john", disable: true }, 
    { id: "1", name: "joe", disable: true }, 
       { id: "2", name: "bill", disable: true }, 
       { id: "3", name: "john", disable: true }, 
    { id: "1", name: "joe", disable: true }, 
       { id: "2", name: "bill", disable: true }, 
       { id: "3", name: "john", disable: true }, 
    { id: "1", name: "joe", disable: true }, 
       { id: "2", name: "bill", disable: true }, 
       { id: "3", name: "john", disable: true }, 
    { id: "1", name: "joe" }, 
       { id: "2", name: "bill", disable: true }, 
       { id: "3", name: "john", disable: true }]; 



    $scope.getPage = function() { 
     var begin = (($scope.currentPage - 1) * $scope.pageSize); 
     var end = begin + $scope.pageSize; 
     $scope.filteredPeople = $filter('filter')($scope.people, { 
      id: $scope.idFilter, 
      name: $scope.nameFilter 

     }); 
     $scope.totalItems = $scope.filteredPeople.length; 
     $scope.filteredPeople = $scope.filteredPeople.slice(begin, end); 
    }; 
    $scope.getPage(); 

    $scope.pageChanged = function() { 
     $scope.getPage(); 
    }; 
    $scope.open = function() { 
     $scope.id = generateUUID(); 
    }; 
    $scope.dblclick = function (index) { 
     for (var i = 0; i < $scope.filteredPeople.length; i++) { 
      $scope.filteredPeople[i].disable = true; 
     } 
     return index.disable = false; 
    } 
    $scope.rowSelect = function (rowdata) { 
     alert(rowdata.name); 
    } 


}); 
tableApp.controller('DetailModalController', [ 
'$scope', '$modalInstance', 'item', 
function ($scope, $modalInstance, item) { 

    $scope.item = item; 

    $scope.dismiss = function() { 
     $modalInstance.dismiss(); 
    }; 

    $scope.close = function() {      
     $modalInstance.close($scope.item);      
    }; 
}]); 

tableApp.directive('myModal', function ($log, $compile) { 
    var parm = []; 
    return { 
     restrict: 'E', 
     templateUrl: 'modalBase.html', 
     scope: { 
      modal: '=', 
      idF:'=' 
     }, 
     link: function (scope, element, attrs) { 
      debugger; 
      parm.name = attrs.idf; 
     } 
     //controller: function ($scope) { 
     // debugger; 
     // console.log($scope); 
     // $scope.selected = { 
     //  item: $scope.modal.items[0] 
     // }; 

     // $scope.ok = function() { 
     //  debugger; 
     //  alert(parm.name); 
     //  $scope.modal.instance.close($scope.selected); 

     // }; 

     // $scope.cancel = function() { 
     //  $scope.modal.instance.dismiss('cancel'); 
     // }; 

     // $scope.modal.instance.result.then(function (selectedItem) { 
     //  $scope.selected = selectedItem; 
     // }, function() { 
     //  $log.info('Modal dismissed at: ' + new Date()); 
     // }); 
     //} 
    }; 
}); 

Answer 1

Come ho capito, si utilizza angular.ui. Ti suggerirei di utilizzare il servizio $modal anziché $modalInstance. Usando questo puoi chiamare la tua istanza modale con $modal.open(). E anche che non c'è bisogno di chiuderlo nel controllore - posto metodi appropriati sul modello modale e funzionerà dai suoi servizi

Template:

<script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title">I'm a modal!</h3> 
    </div> 
    <div class="modal-body"> 
     <ul> 
      <li ng-repeat="item in items"> 
       <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a> 
      </li> 
     </ul> 
     Selected: <b>{{ selected.item }}</b> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" type="button" ng-click="$close()">OK</button> 
     <button class="btn btn-warning" type="button" ng-click="$dismiss('cancel')">Cancel</button> 
    </div> 
</script> 

Controlelr

var modalInstance = $uibModal.open({ 
    templateUrl: 'myModalContent.html', 
    controller: 'ModalInstanceCtrl', 
    resolve: { 
    items: function() { 
     return $scope.items; 
    } 
    } 
}); 

modalInstance.result.then(function (selectedItem) { 
    $scope.selected = selectedItem; 
}, function() { 
    $log.info('Modal dismissed at: ' + new Date()); 
}); 

} ;

Potete trovare ulteriori informazioni su di esso in angular.ui documentation per modali