Wyskakujące modalne wyskakujące okienko w kanciastym js

Question

Próbuję otworzyć modalne wyskakujące okienko z tabelą. Jak mogę to zrobić? W moim app.js, w zdarzeniu kliknięcia w wierszu otwórz modal, chcę też zaktualizować niektóre pola o wybraną wartość pozycji. Ale nie mogę zaktualizować wybranej wartości.

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

Jak rozumiem, używasz angular.ui. Sugerowałbym skorzystanie z usługi $modal zamiast $modalInstance. Za pomocą tego możesz wywołać swoją modalną instancję za pomocą $modal.open(). A także nie trzeba go zamknąć w kontrolerze - miejsce odpowiednie metody modalnej na szablonie i będzie działać przez swoich usług

Szablon:

<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()); 
}); 

} ;

można znaleźć więcej informacji na ten temat w angular.ui documentation dla czasowniki modalne