添加甜蜜的警报角js [英] add sweet alert angular js
问题描述
我是AngularJS的新手,我正尝试使用 https://github.com上的甜蜜警报插件/oitozero/ngSweetAlert ,我已经将相应的脚本添加到了index.html中,如下所示:
I'm new to AngularJS and I'm trying to use sweet alert plugin from https://github.com/oitozero/ngSweetAlert , I already added the corresponding 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>
正如文献所说.现在在我的 ctrl.js 中,我有了这个:
As the documentacion says. Now in my ctrl.js I have this :
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);
但是不起作用,在我的浏览器上,我从开发人员工具中收到了以下错误消息:
But is not working, on my browser I got this error from developer tools:
错误:[$ injector:unpr] http://errors.angularjs.org/1.4.3/ $ injector/unpr?p0 = oitozero.ngSweetAlertProvider%20%3C-" itozero.ngSweetAlert%20%3C-%20MiSolicitudCtrl 错误时(本机) 在 http://localhost:8081/assets/libs/angular/angular.min.js:6:416 在 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 ) 在 http://localhost:8081/assets/libs/angular/angular.min.js:40:449 在d( http://localhost:8081/assets/libs/angular/angular.min.js:38:364 ) 在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 ) 在$ get( http://localhost:8081/assets/libs/angular/angular.min.js:80:228 ) 在链接( http://localhost:8081/assets/libs/angular/angular-route.min.js:7:268 )
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)
如何正确实现此插件?
更新1
我已经尝试过@Pankaj Parkar和@Mike G的建议
I have already try this suggestion by @Pankaj Parkar and @Mike G
ctrl.$inject = ['$scope', 'oitozero.ngSweetAlert'];
像这样
ctrl.$inject = ['$scope', 'SweetAlert'];
我的开发人员工具抛出此消息:
My developer tools throws 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)
推荐答案
这是我编写的使SweetAlert正常工作的简单模块.
Here is a simple module that I wrote to make SweetAlert work.
// sweetalert.js
angular
.module('sweetalert', [])
.factory('swal', SweetAlert);
function SweetAlert() {
return window.swal;
};
因此,无需使用任何其他库来使用sweetalert,只需编写自己的库即可.
Hence, no need to use any other library to use sweetalert, simply write your own.
只需将模块插入到要使用它的控制器中即可.
Simply inject the module in the controller where you want to use it.
示例
angular
.module('demo', ['sweetalert'])
.controller('DemoController', DemoController);
function DemoController($scope) {
$scope.btnClickHandler = function() {
swal('Hello, World!');
};
};
以下是咖啡脚本中的一个要点示例: https://gist.github.com/pranav7/d075f7cd8263159cf36a
Here is an example gist in coffeescript: https://gist.github.com/pranav7/d075f7cd8263159cf36a
这篇关于添加甜蜜的警报角js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!