Modal w Angular nie działa. Nieobsługiwane odrzucenie {}

Question

Chcę utworzyć modal (okno dialogowe). Śledziłem przykłady na oficjalnej dokumentacji bootstrap, ale utknąłem. Kiedy próbuję utworzyć modalne Otrzymuję błąd

angular.min.js: 122 Ewentualnie nieobsługiwany odrzucenia: {}

mainController:

angular 
.module('app') 
.controller('tlmController', function($scope, $http, $timeout, $uibModal,   DTOptionsBuilder, DataLoader, TestLines) { 
    $scope.openTestLineDetails = function(id) { 
     var modalInstance = $uibModal.open({ 
      size: 'lg', 
      controller: 'testlineDetailsController', 
      templateUrl: 'app/client/layout/testlinedetails.tpl.html', 
      resolve: { 
       testLineId: function() { 
        return id; 
       } 
      } 
     }); 
    }; 
}) 

i TestlineDetailsController:

angular 
.module('app') 
.controller('testlineDetailsController', function($scope, $modalInstance, testLineId) { 


}); 

Co jest nie tak z tym kodem? Używam $ uibModal (usługa $ modal nie istnieje) w głównym kontrolerze. Kiedy zamieniam $ modalInstance na $ uibModalInstance, otrzymuję również błąd (usługa $ uibModalInstance nie istnieje), więc muszę użyć $ uibModal z $ modalInstance. Strage, ale prawda.

Answer 1

można napisać poniżej kod w app.config

app.config(['$qProvider', function ($qProvider) { 
    $qProvider.errorOnUnhandledRejections(false); 
}]); 

Answer 2

Przede wszystkim należy sprawdzić Twój skrypt modalne kontroler jest dołączany do głównego pliku HTML, a jeśli jej dołączany (pojawia się) w przeglądarce (w Chrome otwórz narzędzia programistyczne dla web z klawiszem F12, a następnie otwórz przycisk karty "Elementy") (To jest w przypadku, gdy używasz narzędzia do rusztowania, takiego jak generator-angular z zespołu Yeomana, pamiętaj o wyczyszczeniu pamięci podręcznej, aby uzyskać najnowszą aktualizację z twojego kodu), ponieważ miałem ten sam problem :(i ciągle sprawdzałem, co było nie tak z moim kodem, wtedy odkryłem, że przeglądarka nie dołącza najnowszego skryptu, który zrobiłem (kontroler Modal), więc mój kod był jak twój, ale ta Król Twój przykładowy kod:

 


            
 
 
 

             
  
 
   
<!-- In your index.html file, check for this script being appended in your browser --> 
 
<script src="testlineDetailsController.js"></script>
 
  
            
 
 
 

 

//In your parent controller 
 
angular 
 
.module('app') 
 
.controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) { 
 
    $scope.openTestLineDetails = function(id) { 
 
     var modalInstance = $uibModal.open({ 
 
      size: 'lg', 
 
      controller: 'testlineDetailsController', 
 
      templateUrl: 'app/client/layout/testlinedetails.tpl.html', 
 
      resolve: { 
 
       testLineId: function() { 
 
        return id; 
 
       } 
 
      } 
 
     }); 
 
    }; 
 
})

Po drugie, upewnij się, że realizują co najmniej jedną metodę z modalnego usługi instancji w kontrolerze modalnej: EDIT: (opcjonalnie , możesz ukryć modalny za pomocą właściwości tło z obiektu modalnego)

//In your modal controller 
 
angular.module('app'). 
 
controller('testlineDetailsController', function ($scope, $uibModalInstance, testLineId) { 
 
      //In case you have the ok and cancel buttons in your modal template 
 
      $scope.id = testLineId; 
 
      $scope.ok = function() { 
 
       $uibModalInstance.close(); 
 
      }; 
 

 
      $scope.cancel = function() { 
 
       $uibModalInstance.dismiss('cancel'); 
 
      }; 
 
      
 
     });

Po tym czasie aplikacja powinna działać.

Teraz jest inną alternatywą, aby ten problem rozwiązać, można bezpośrednio napisać funkcję kontrolera w majątku modalnych opcji obiektu:

//In your parent controller 
 
angular 
 
.module('app') 
 
.controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) { 
 
    $scope.openTestLineDetails = function(id) { 
 
     var modalInstance = $uibModal.open({ 
 
      size: 'lg', 
 
      //write an anonymous function instead of naming the controller name. 
 
      controller: function ($scope, $uibModalInstance, testLineId) { 
 
       $scope.id = testLineId; 
 
       $scope.ok = function() { 
 
       $uibModalInstance.close(); 
 
       }; 
 
       $scope.cancel = function() { 
 
       $uibModalInstance.dismiss('cancel'); 
 
       }; 
 
      }, 
 
      templateUrl: 'app/client/layout/testlinedetails.tpl.html', 
 
      resolve: { 
 
       testLineId: function() { 
 
        return id; 
 
       } 
 
      } 
 
     }); 
 
    }; 
 
})

Ta alternatywa powinna działa również w Twojej aplikacji. Mam nadzieję, że to wyjaśnienie pomoże ci rozwiązać problem, który masz.