I am new to AngularJS and I am trying to use the warning plugin from https://github.com/oitozero/ngSweetAlert , I have already added the appropriate scripts to my index.html like this:
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>
As stated in the document. Now in my ctrl.js I have this:
var ctrl = function ($scope, SweetAlert) { SweetAlert.swal("Here a message"); // this does not work } ctrl.$inject = ['$scope', 'oitozero.ngSweetAlert]; angular.module('myApp.missolicitudes.controllers', [ 'oitozero.ngSweetAlert' ]) .controller('MiSolicitudCtrl', ctrl);
But it doesn’t work, in my browser I received this error from the developer tools:
Error: [$ injector: unpr] http://errors.angularjs.org/1.4.3/ $ injector / unpr? p0 = oitozero.ngSweetAlertProvider% 20% 3C - "" itozero.ngSweetAlert% 20% 3C-% 20MiSolicitudCtrl on 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 in 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 ) with e ( http: // localhost: 8081 / assets / libs / angular / angular.min.js: 39: 124 ) in Object.instantiate ( http: // localhost: 8081 / assets /libs/angular/angular.min.js:39:273 ) in $ get ( http: // localhost: 8081 / assets / libs / angular / angular.min.js: 80: 228 ) via the link ( http: // localhost: 8081 / assets / libs / angular / angular-route.min.js: 7: 268 )
How can I implement this plugin correctly?
Update 1
I already tried this offer @Pankaj Parkar and @Mike G
ctrl.$inject = ['$scope', 'oitozero.ngSweetAlert'];
etc.
ctrl.$inject = ['$scope', 'SweetAlert'];
My developer tools call this message:
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)
Here is a simple module that I wrote to get SweetAlert to work.
// sweetalert.js angular .module('sweetalert', []) .factory('swal', SweetAlert); function SweetAlert() { return window.swal; };
Therefore, there is no need to use any other library to use sweetalert, just write your own.
Just add the module to the controller where you want to use it.
Example
angular .module('demo', ['sweetalert']) .controller('DemoController', DemoController); function DemoController($scope) { $scope.btnClickHandler = function() { swal('Hello, World!'); }; };
Here is a gist example in coffeescript: https://gist.github.com/pranav7/d075f7cd8263159cf36a
I got it working, NOT by inserting it into a module.
my ctrl.js just received
ctrl.$inject = ['$scope'];
and inside my controller y just call it like that
var ctrl = function ($scope) { swal("Here a message"); }
And it works !, I don’t know if it’s right ... but at least it works.
Paste sweetalert.min.js and sweetalert.css . Used like this code in your controller
swal({ type: "error", title: "Error!", text: "fail", confirmButtonText: "OK" });
`
Never enter module into controller as a dependency. You should enter SweetAlert factory where there are various functions for displaying alerts. Also add the missing ' qoute in the injection factory.
module
controller
SweetAlert
'
You have to use
ctrl.$inject = ['$scope', 'SweetAlert'];//<==`oitozero.ngSweetAlert` module //could be injectable inside your app module.
Demo plunkr