집 >웹 프론트엔드 >JS 튜토리얼 >Angular-UI Bootstrap 구성 요소를 사용하여 경고를 구현하는 방법

Angular-UI Bootstrap 구성 요소를 사용하여 경고를 구현하는 방법

不言원래의: 2018-07-13 09:57:071984검색

이 글은 주로 Angular-UI Bootstrap 컴포넌트를 사용하여 알림을 구현하는 방법을 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유합니다

Angular -UI Bootstrap은 Angular 지시문으로 포팅된 인기 있는 Bootstrap 프로젝트의 많은 구성 요소를 제공합니다(코드 양을 크게 줄임). Angular 애플리케이션에서 Bootstrap 구성 요소를 사용할 계획이라면 주의 깊게 확인하는 것이 좋습니다. 그렇긴 하지만, Bootstrap을 직접 사용하는 것도 효과가 있을 것입니다.

Angular 컨트롤러는 서비스 코드를 공유할 수 있습니다. 경고는 서비스 코드를 컨트롤러에 공유하는 좋은 사용 사례 중 하나입니다.

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);
  };
}

Given that we want 앱의 다양한 컨트롤러에서 경고를 생성하면 컨트롤러 전체의 코드를 참조하기가 쉽지 않으므로 이를 서비스로 이동할 예정입니다.

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;];

나는 이 전역 바인딩에 완전히 동의하지 않습니다. 나는 경고 명령의 닫기 데이터 속성에서 직접 서비스 메서드를 호출하는 것입니다. 왜 이런 식으로 하지 마세요.

이제 경고를 생성하는 것은 컨트롤러에서 AlertService.add() 메서드를 호출하기만 하면 됩니다.

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

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

Angular-UI Bootstrap 구성 요소를 사용하여 경고를 구현하는 방법

관련 기사