angular-toaster 入坑记
2022-02-18 18:27:18
toaster是啥呢。是一款非常炫酷的提示插件,忍耐不住的人可以先去看特效。
不好的地方希望大家轻喷- -
去万能的npm官网,搜一下toaster就可以找到,这里介绍的是angular1*的toaster
安装方法我个人喜欢npm,万能的npm
npm install --save angularjs-toaster
npm安装也很简单,网上很多教程。
开始正题了首先我们通过引入文件来开始我们的项目
需要依赖angular-animate 注意咯~
最简单的一种,先推荐个在线编译的
http://plnkr.co/edit/?p=catalogue
官网的例子必须要自己写完整了才可以用,直接拿过来是不行的
angular.module('main', ['toaster', 'ngAnimate'])
.controller('myController', function($scope, toaster) {
$scope.pop = function(){
toaster.pop('success', "title", "text");
};
});
Hello Plunker!
Show a Toaster
<toaster-container></toaster-container>//这个指令放在当前页面就行,没有这个是没有特效的,他是特效的容器
toaster.pop('success', "title", "text");//这段代码就是特效产生的代码
関連
-
[解決済み】ERR_INVALID_HTTP_RESPONSEをAngular 7とASP.Net Core 2.2を使ってGoogle Chromeブラウザーで使用する場合
-
[解決済み】Angular 6 エラー表示から 'mat-form-field' は既知の要素ではありません。
-
[解決済み] @viewChildが機能しない - プロパティnativeElementがundefinedで読み込めない
-
[解決済み】エラー。どのルートにもマッチしません。URLセグメント: - Angular 2
-
[解決済み] CLIでコンポーネントを削除する最も良い方法は何ですか?
-
[解決済み] ionInputとionChangeで有意差あり
-
[解決済み] Angular 6 Error trying to diff '[object Object]'. 配列と反復記号のみが許可されます。
-
[解決済み] switchの使用時に「ステートメントはif文でフィルタリングされなければならない」というtslintのクレームが発生する。
-
[解決済み] ローカルホストが私のアンギュラーアプリに対して無効な応答を送信しました。
-
[解決済み] Angular 6でmouseoverとmouseoutを使用する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 node_modules/rxjs/internal/types.d.ts(81,44): エラー TS1005: ';' Angular 6のインストール後に予想されたエラー
-
[解決済み】Angular: オブジェクトをサポートしているdiffが見つからない '[object Object]'
-
[解決済み】angularでpreflightのレスポンスがHTTP okステータスにならない。
-
[解決済み] ng serve または firebase serve を終了させる方法
-
[解決済み] Angular 2でディレイを作成する方法
-
[解決済み] なぜ mat-tables matRowDef は 2 つの変数を含むのですか?
-
[解決済み] Angular2: [(ngModel)] with [ngModelOptions]="{standalone: true}"を使って、モデルのプロパティへの参照にリンクさせる。
-
[解決済み] Angular 4 - "BrowserAnimationsModule "または "NoopAnimationsModule "のいずれかをアプリケーションに組み込んでください。
-
角入力の取得と設定
-
AngularでHTMLテキストを動的に結合する