web-dev-qa-db-ja.com

甘いアラートを追加angular js

私は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>

Documentacionが言うように。今私の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 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/angle.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：27 ）at $リンクで（ http：// localhost：8081/assets/libs/angular/angular.min.js：80：228 ）を取得します（ http：// localhost：8081/assets/libs/angular/angular-route.min.js：7：268 ）

このプラグインを正しく実装するにはどうすればよいですか？

更新1

私はすでに@PankajParkarと@MikeGによるこの提案を試しました

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)
angularjssweetalert
7
Luis Felipe Garcia

これは、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のGistの例です： https://Gist.github.com/pranav7/d075f7cd8263159cf36a

3
Pranav Singh

注入sweetalert.min.jsおよびsweetalert.css。コントローラでこのコードのように使用されます

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

`

1
Nishan Madhuwantha

[〜＃〜] not [〜＃〜]モジュールに挿入することで動作しました。

私のctrl.jsちょうどこのようになりました

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

私のコントローラーの中では、このように呼んでください

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

そしてそれはうまくいきます！、私は正しい方法かどうかわかりません...しかし少なくともうまくいきます。

1
Luis Felipe Garcia

依存関係としてmoduleをcontrollerに挿入しないでください。アラートを表示するさまざまな機能を備えたSweetAlertファクトリをそこに挿入する必要があります。また、不足している'qouteをファクトリインジェクションに追加します。

あなたは使用する必要があります

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

デモプランカー

0
Pankaj Parkar