TypeError: swal is not a function in SweetAlert.js in angularjs using ngSweetAlert

Michael Mendoza picture Michael Mendoza · Dec 6, 2015 · Viewed 21.9k times · Source

I have tried the ngSweetAlert in my angular app. and when ever itry to used the SweetAlert.swal() Error occured im my developers tool TypeError: swal is not a function.

snippet.

(function() {
'use strict';
var app = angular.module('iCheckMobile', ['oitozero.ngSweetAlert']);
var BASE_URL = 'http://localhost:8000/';

app.controller('MobileCntrlr', ['$http', '$scope', '$window', '$location', '$interval', '$timeout', 'iCheckMobileFactory', '$filter', 'SweetAlerts', function($http, $scope, $window, $location, $interval, $timeout, iCheckMobileFactory, $filter, SweetAlerts) {
    var mbleCntrl = this;

. . . ///area where i used ngSweetAlert

var forceSubmitExam = function() {
        // $window.confirm('Submiting exammination automatically');
        SweetAlerts.swal('Submitting Examination Automatically', 'You have not enough time', 'success');
        var submitInfo = {
            'answers': JSON.stringify(mbleCntrl.answers),
            'student_id': mbleCntrl.studentDetail.id,
            'subject_slug': mbleCntrl.subject_slug,
            'subject_id': subject_id
        };
        $http.post(BASE_URL + 'mobile/examination/submit', submitInfo)
            .success(function(response) {
                mbleCntrl.answers = '';
                console.log(response);
            })
            .error(function() {
                $window.confirm('Error on submitting the examination!');
            })
    };

SweetAlert.js

    angular.module('oitozero.ngSweetAlert', [])
.factory('SweetAlerts', [ '$rootScope', function ( $rootScope ) {
    var swal = window.swal;
    //public methods
    var self = {
        swal: function ( arg1, arg2, arg3 ) {
            $rootScope.$evalAsync(function(){
                if( typeof(arg2) === 'function' ) {
                    swal( arg1, function(isConfirm){
                        $rootScope.$evalAsync( function(){
                            arg2(isConfirm);
                        });
                    }, arg3 );
                } else {
                    swal( arg1, arg2, arg3 );
                }
            });
        },
        success: function(title, message) {
            $rootScope.$evalAsync(function(){
                swal( title, message, 'success' );
            });
        },
        error: function(title, message) {
            $rootScope.$evalAsync(function(){
                swal( title, message, 'error' );
            });
        },
        warning: function(title, message) {
            $rootScope.$evalAsync(function(){
                swal( title, message, 'warning' );
            });
        },
        info: function(title, message) {    
            $rootScope.$evalAsync(function(){
                swal( title, message, 'info' );
            });
        }
    };

    return self;
}]);

I think there is something wrong with it, can you help me guys, ^^ totally novice in angular. thanks.

Answer

Hakan picture Hakan · Nov 1, 2016

First Include Js File

<script src="components/sweetalert/dist/sweetalert.min.js"></script>

Than Include Angular File

<script src="components/angular-sweetalert/SweetAlert.js"></script>