ホームページ > 記事 > ウェブフロントエンド > Angular-UI Bootstrap コンポーネントを使用してアラートを実装する方法

Angular-UI Bootstrap コンポーネントを使用してアラートを実装する方法

不言オリジナル: 2018-07-13 09:57:071832ブラウズ

この記事では、主に 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=&#39;btn&#39; ng-click="addAlert()">Add Alert</button>
</div>

controller

function AlertDemoCtrl($scope) {
  $scope.alerts = [
    { type: &#39;error&#39;, msg: &#39;Oh snap! Change a few things up and try submitting again.&#39; }, 
    { type: &#39;success&#39;, msg: &#39;Well done! You successfully read this important alert message.&#39; }
  ];
  $scope.addAlert = function() {
    $scope.alerts.push({msg: "Another alert!"});
  };
  $scope.closeAlert = function(index) {
    $scope.alerts.splice(index, 1);
  };
}

アプリ内の異なるコントローラーにアラートを作成したいのですが、コントローラー間でコードを参照するのは簡単ではないため、移動します。サービスへ。

alertService

&#39;use strict&#39;;
/* services.js */
// don&#39;t forget to declare this service module as a dependency in your main app constructor!
var appServices = angular.module(&#39;appApp.services&#39;, []);
appServices.factory(&#39;alertService&#39;, function($rootScope) {
    var alertService = {};
    // create an array of alerts available globally
    $rootScope.alerts = [];
    alertService.add = function(type, msg) {
      $rootScope.alerts.push({&#39;type&#39;: type, &#39;msg&#39;: 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 = [&#39;$scope&#39;, &#39;$location&#39;, &#39;alertService&#39;];

私が望んでいるのは、このグローバルバインディングに完全には同意できません。アラート命令の close data 属性から直接サービスメソッドを呼び出すことですが、なぜこの方法で実装されないのかわかりません。

アラートを作成するには、いずれかのコントローラーからalertService.add() メソッドを呼び出すだけです。

function ArbitraryCtrl($scope, alertService) {
  alertService.add("warning", "This is a warning.");
  alertService.add("error", "This is an error!");
}

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

Angular-UI Bootstrap コンポーネントを使用してアラートを実装する方法

関連記事