7

私は 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/ $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 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 で 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 ) で $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!');
  };
};

以下は、coffeescript の要旨の例です: 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 に答える
0

依存関係としてamoduleを to に挿入しないでください。アラートを表示するためのさまざまな機能を持つファクトリをそこにcontroller注入する必要があります。SweetAlertまた、欠落している'qoute をファクトリ インジェクションに追加します。

使用する必要があります

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

デモプランカー

于 2015-08-19T19:55:42.950 に答える