dodać słodki powiadomienie kątowych js

Question

Jestem nowy angularjs i staram się używać słodkich wtyczki powiadomienie od https://github.com/oitozero/ngSweetAlert, ja już dodane odpowiednie skrypty do mojego index.html tak:

index.html

<link rel="stylesheet" href="bower_components/sweetalert/dist/sweetalert.css"> 
<script src="bower_components/angular-sweetalert/SweetAlert.min.js"></script> 
<script src="bower_components/sweetalert/dist/sweetalert.min.js"></script> 

Jak mówi dokumentacja. Teraz w moich ctrl.js mam to:

var ctrl = function ($scope, SweetAlert) { 

    SweetAlert.swal("Here's a message"); // this does not work 
} 

ctrl.$inject = ['$scope', 'oitozero.ngSweetAlert]; 

angular.module('myApp.missolicitudes.controllers', 
    [ 
     'oitozero.ngSweetAlert' 
    ]) 
    .controller('MiSolicitudCtrl', ctrl); 

Ale nie działa na mojej przeglądarce mam ten błąd z narzędzi programistycznych:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.3/ $injector/unpr?p0=oitozero.ngSweetAlertProvider%20%3C-""itozero.ngSweetAlert%20%3C-%20MiSolicitudCtrl at Error (native) at http://localhost:8081/assets/libs/angular/angular.min.js:6:416 at http://localhost:8081/assets/libs/angular/angular.min.js:40:375 at Object.d [as get] (http://localhost:8081/assets/libs/angular/angular.min.js:38:364) at http://localhost:8081/assets/libs/angular/angular.min.js:40:449 at d (http://localhost:8081/assets/libs/angular/angular.min.js:38:364) at e (http://localhost:8081/assets/libs/angular/angular.min.js:39:124) at Object.instantiate (http://localhost:8081/assets/libs/angular/angular.min.js:39:273) at $get (http://localhost:8081/assets/libs/angular/angular.min.js:80:228) at link (http://localhost:8081/assets/libs/angular/angular-route.min.js:7:268)

Jak mogę wdrożyć tej wtyczki prawidłowo?

Aktualizacja 1

mam już wypróbować tę sugestię przez @Pankaj Parkar i @Mike G

ctrl.$inject = ['$scope', 'oitozero.ngSweetAlert']; 

i jak tego

ctrl.$inject = ['$scope', 'SweetAlert']; 

moich narzędzi programistycznych rzuca tę wiadomość:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.3/$injector/unpr?p0=oitozero.ngSweetAlertProvider%20%3C-"<div class="container ng-scope" ng-view="">"itozero.ngSweetAlert%20%3C-%20MiSolicitudCtrl 
at Error (native) 
at http://localhost:8081/assets/libs/angular/angular.min.js:6:416 
at http://localhost:8081/assets/libs/angular/angular.min.js:40:375 
at Object.d [as get] (http://localhost:8081/assets/libs/angular/angular.min.js:38:364) 
at http://localhost:8081/assets/libs/angular/angular.min.js:40:449 
at d (http://localhost:8081/assets/libs/angular/angular.min.js:38:364) 
at e (http://localhost:8081/assets/libs/angular/angular.min.js:39:124) 
at Object.instantiate (http://localhost:8081/assets/libs/angular/angular.min.js:39:273) 
at $get (http://localhost:8081/assets/libs/angular/angular.min.js:80:228) 
at link (http://localhost:8081/assets/libs/angular/angular-route.min.js:7:268) 

Answer 1

Nigdy nie należy wstrzykiwać module do controller jako zależności. Powinieneś wstrzyknąć tam fabrykę SweetAlert, która ma różne funkcje wyświetlania ostrzeżeń. Dodaj również brakujący fabryczny wtrysk '.

Należy użyć

ctrl.$inject = ['$scope', 'SweetAlert'];//<==`oitozero.ngSweetAlert` module    
              //could be injectable inside your app module. 

Demo Plunkr

Answer 2

mam pracować, przez NOT wstrzykiwanie go w module.

moi ctrl.js właśnie dostał się ten

ctrl.$inject = ['$scope']; 

i wewnątrz mój kontroler y po prostu nazwać jak ten

var ctrl = function ($scope) { 
    swal("Here's a message"); 
} 

I to działa !, ja nie wiem, czy w prawidłowy sposób ... ale przynajmniej działa.

Answer 3

Oto prosty moduł, który napisałem, aby wykonać pracę SweetAlert.

// sweetalert.js 

angular 
    .module('sweetalert', []) 
    .factory('swal', SweetAlert); 

function SweetAlert() { 
    return window.swal; 
}; 

Dzięki temu nie trzeba używać żadnej innej biblioteki do korzystania z sweetalert, wystarczy napisać własną.

Po prostu wstrzyknij moduł w kontroler, gdzie chcesz go użyć.

Przykład

angular 
    .module('demo', ['sweetalert']) 
    .controller('DemoController', DemoController); 

function DemoController($scope) { 
    $scope.btnClickHandler = function() { 
    swal('Hello, World!'); 
    }; 
}; 

Oto przykład GIST coffeescript: https://gist.github.com/pranav7/d075f7cd8263159cf36a

Answer 4

Inject sweetalert.min.js i sweetalert.css. używany jak ten kod w kontrolerze

swal({ 
     type: "error", 
     title: "Error!", 
     text: "fail", 
     confirmButtonText: "OK" 
     }); 

`