我是AngularJS的新手,我正在尝试使用来自https://github.com/oitozero/ngSweetAlert的甜蜜警报插件,我已经将相应的脚本添加到我的index.html中,如下所示:
的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 中我有这个:
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);
但是没有用,在我的浏览器上我从开发人员工具中得到了这个错误:
错误:[$ injector:unpr] http://errors.angularjs.org/1.4.3/ $注射器/ unpr P0 = oitozero.ngSweetAlertProvider%20%3C - ? “” itozero.ngSweetAlert%20%3 C-%20MiSolicitudCtrl 在错误(本机) 在http://localhost:8081/assets/libs/angular/angular.min.js:6:416 在http://localhost:8081/assets/libs/angular/angular.min.js:40:375 在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) 在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) 在链接(http://localhost:8081/assets/libs/angular/angular-route.min.js:7:268)
如何正确实现此插件?
更新1
我已经尝试过@Pankaj Parkar和@Mike G
这个建议ctrl.$inject = ['$scope', 'oitozero.ngSweetAlert'];
并且喜欢这个
ctrl.$inject = ['$scope', 'SweetAlert'];
我的开发人员工具会抛出此消息:
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)
答案 0 :(得分:3)
这是我为使SweetAlert工作而编写的一个简单模块。
// sweetalert.js
angular
.module('sweetalert', [])
.factory('swal', SweetAlert);
function SweetAlert() {
return window.swal;
};
因此,不需要使用任何其他库来使用sweetalert,只需编写自己的。
只需将模块注入您想要使用它的控制器中。
示例强>
angular
.module('demo', ['sweetalert'])
.controller('DemoController', DemoController);
function DemoController($scope) {
$scope.btnClickHandler = function() {
swal('Hello, World!');
};
};
以下是coffeescript的示例要点:https://gist.github.com/pranav7/d075f7cd8263159cf36a
答案 1 :(得分:1)
我通过 NOT 将其注入模块中来实现它。
我的 ctrl.js 就是这样的
ctrl.$inject = ['$scope'];
在我的控制器里面,你可以这样称呼它
var ctrl = function ($scope) {
swal("Here's a message");
}
它有效!,我不知道是否正确的方法......但至少有效。
答案 2 :(得分:1)
注入 sweetalert.min.js 和 sweetalert.css 。 像你控制器中的代码一样使用
swal({
type: "error",
title: "Error!",
text: "fail",
confirmButtonText: "OK"
});
`
答案 3 :(得分:0)
永远不要将module
作为依赖项注入controller
。你应该在那里注入SweetAlert
工厂,它有各种功能来显示警报。还要在工厂注入时添加缺少的'
qoute。
你应该使用
ctrl.$inject = ['$scope', 'SweetAlert'];//<==`oitozero.ngSweetAlert` module
//could be injectable inside your app module.