TypeError：swal不是使用ngSweetAlert在angularjs中的SweetAlert.js中的函数

Question

我在我的角应用程序中尝试了ngSweetAlert。什么时候使用SweetAlert.swal（）错误发生我的开发人员工具TypeError：swal不是一个函数。

片段。

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

。 。 。 ///我使用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;
}]);

我认为它有问题，你能帮助我们吗，^^完全是新手的角色。感谢。

Answer 1

首先包含Js文件

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

比包含角文件

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

Answer 2

我遇到了同样的问题。以下是修复它的方法。

您需要再添加一个Sweetalert文件。

merc@mercs-thinkpad:~/tt$ bower help install

Usage:

    bower install [<options>]
    bower install <endpoint> [<endpoint> ..] [<options>]

Options:

    -F, --force-latest      Force latest version on conflict
    -f, --force             If dependencies are installed, it reinstalls all installed components. It also forces installation even when there are non-bower directories with the same name in the components directory. Also bypasses the cache and overwrites to the cache anyway.
    -h, --help              Show this help message
    -p, --production        Do not install project devDependencies
    -S, --save              Save installed packages into the project's bower.json dependencies
    -D, --save-dev          Save installed packages into the project's bower.json devDependencies
    -E, --save-exact        Configure installed packages with an exact version rather than semver
    Additionally all global options listed in 'bower help' are available

Description:

    Installs the project dependencies or a specific set of endpoints.
    Endpoints can have multiple forms:
    - <source>
    - <source>#<target>
    - <name>=<source>#<target>

    Where:
    - <source> is a package URL, physical location or registry name
    - <target> is a valid range, commit, branch, etc.
    - <name> is the name it should have locally.

复制上述js＆amp;创建一个具有相对名称的文件＆amp;在sweet-alert.min.js之前加入它。

重新加载页面＆amp;呼叫。错误消失了。 :)

希望这有帮助。

Answer 3

您是否添加了sweetalert依赖项（sweet-alert.js和sweet-alert.css）？ 如果你没有，你应该添加它。（ngSweetAlert依赖于sweetalert）