7

我是 AngularJS 的新手，我正在尝试使用来自https://github.com/oitozero/ngSweetAlert的甜蜜警报插件，我已经将相应的脚本添加到我的 index.html 中，如下所示：

索引.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/$injector/unpr?p0=oitozero.ngSweetAlertProvider%20%3C-""itozero.ngSweetAlert%20%3C-%20MiSolicitudCtrl at在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 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) 在 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）

我怎样才能正确实现这个插件？

更新 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)
4

4 回答 4

4

这是我为使 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!');
  };
};

这是咖啡脚本中的一个示例要点：https ://gist.github.com/pranav7/d075f7cd8263159cf36a

于 2016-01-30T06:58:48.647 回答
1

通过不将其注入模块中，我得到了它的工作。

我的ctrl.js就是这样

ctrl.$inject = ['$scope'];

在我的控制器里面，你就这样称呼它

var ctrl = function ($scope) {
    swal("Here's a message");
}

它有效！，我不知道是否正确的方法......但至少有效。

于 2015-08-19T20:16:36.843 回答
1

注入sweetalert.min.js和sweetalert.css。在您的控制器中像此代码一样使用

swal({
        type: "error",
        title: "Error!",
        text: "fail",
        confirmButtonText: "OK"
      });

`

于 2017-03-19T08:23:32.500 回答
0

永远不要将moduletocontroller作为依赖注入。SweetAlert您应该在那里注入具有各种功能以显示警报的工厂。还要在工厂注入中添加缺少的'qoute。

你应该使用

ctrl.$inject = ['$scope', 'SweetAlert'];//<==`oitozero.ngSweetAlert` module               
                                            //could be injectable inside your app module.

演示 Plunkr

于 2015-08-19T19:55:42.950 回答