この記事では、主に Angular-UI Bootstrap コンポーネントを使用してアラートを実装する方法を紹介します。これには、必要な友人が参照できるように共有します。プロジェクトが Angular ディレクティブに移植されました (コード サイズが大幅に削減されました)。 Angular アプリケーションで Bootstrap コンポーネントを使用する予定がある場合は、慎重に確認することをお勧めします。そうは言っても、Bootstrap を直接使用しても機能するはずです。
Angular コントローラーはサービス コードを共有できます。アラートは、サービス コードをコントローラーに共有するための優れた使用例の 1 つです。
Angular-UI Bootstrap ドキュメントには次の例が記載されています:
view
<div ng-controller="AlertDemoCtrl"> <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert> <button class='btn' ng-click="addAlert()">Add Alert</button> </div>
controller
function AlertDemoCtrl($scope) { $scope.alerts = [ { type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' }, { type: 'success', msg: 'Well done! You successfully read this important alert message.' } ]; $scope.addAlert = function() { $scope.alerts.push({msg: "Another alert!"}); }; $scope.closeAlert = function(index) { $scope.alerts.splice(index, 1); }; }
アプリ内の異なるコントローラーにアラートを作成したいのですが、コントローラー間でコードを参照するのは簡単ではないため、移動します。サービスへ。
alertService
'use strict'; /* services.js */ // don't forget to declare this service module as a dependency in your main app constructor! var appServices = angular.module('appApp.services', []); appServices.factory('alertService', function($rootScope) { var alertService = {}; // create an array of alerts available globally $rootScope.alerts = []; alertService.add = function(type, msg) { $rootScope.alerts.push({'type': type, 'msg': msg}); }; alertService.closeAlert = function(index) { $rootScope.alerts.splice(index, 1); }; return alertService; });
view
<div> <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</alert> </div>
最後に、alertService の closeAlert() メソッドを $globalScope にバインドする必要があります。
controller
function RootCtrl($rootScope, $location, alertService) { $rootScope.changeView = function(view) { $location.path(view); } // root binding for alertService $rootScope.closeAlert = alertService.closeAlert; } RootCtrl.$inject = ['$scope', '$location', 'alertService'];
私が望んでいるのは、このグローバル バインディングに完全には同意できません。アラート命令の close data 属性から直接サービス メソッドを呼び出すことですが、なぜこの方法で実装されないのかわかりません。
アラートを作成するには、いずれかのコントローラーからalertService.add() メソッドを呼び出すだけです。
function ArbitraryCtrl($scope, alertService) { alertService.add("warning", "This is a warning."); alertService.add("error", "This is an error!"); }
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
vue.js 組み込みコンポーネントの keep-alive コンポーネントの使用方法の詳細な説明例 Angular5_AngularJS のパブリック コンポーネントのラジオ リストを抽出するサンプル コード以上がAngular-UI Bootstrap コンポーネントを使用してアラートを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。