angularjs – 添加甜蜜警报角js

发布时间：2020-12-17 17:38:57 所属栏目：安全来源：网络整理

导读：我是AngularJS的新手,我正在尝试使用 https://github.com/oitozero/ngSweetAlert中的甜蜜警报插件,我已经将相应的脚本添加到我的index.html中,如下所示：的index.html link rel="stylesheet" href="bower_components/sweetalert/dist/sweetalert.css"script

我是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);

但是没有用,在我的浏览器上我从开发人员工具中得到了这个错误：

Error: [$injector:unpr]
07001$injector/unpr?p0=oitozero.ngSweetAlertProvider%20%3C-“”itozero.ngSweetAlert%20%3C-%20MiSolicitudCtrl
at Error (native)
at 07002
at 07003
at Object.d [as get] (07004)
at 07005
at d (07004)
at e (07007)
at Object.instantiate (07008)
at $get (07009)
at link (070010)

如何正确实现此插件？

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

解决方法

这是我为使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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!