星期六, 6月 21, 2014

[AngularJS] 整合UI-bootstrap alert diretive

將原本的UI-Bootstrap再使用一層AlterService來包裝,使用起來更方便:D

此外也可利用$rootScope.$broadcast事件的方法來統一處理全域的訊息

Directive

<alert ng-repeat="alert in alerts"
	type="alert.type"
	close="alert.close($index)">{{alert.msg}}</alert>


AlertService Factory


支援timeout自動關閉訊息

app.factory('AlertService', ['$rootScope', '$timeout', '$log',
	function($rootScope, $timeout, $log) {
		var alertService = this;

		$rootScope.alerts = [];
		return alertService = {

			add: function(type, msg, timeout) {

				$rootScope.alerts.push({
					type: type,
					msg: msg,
					close: function() {
						return alertService.closeAlert(this);
					}
				});

				if(typeof(timeout) == 'undefined'){
					timeout = 5000;
				}
				if (timeout) {
					$timeout(function() {
						alertService.closeAlert(this);
					}, timeout);
				}
			},
			closeAlert: function(alert) {
				$log.log(alert);
				return this.closeAlertIdx($rootScope.alerts.indexOf(alert));
			},
			closeAlertIdx: function(index) {
				return $rootScope.alerts.splice(index, 1);
			},
			clear: function(){
            	$rootScope.alerts = [];
          	}

		};

	}
])

Controller

angular.module('myApp.controllers').controller('LoginCtrl', ['$rootScope','$scope', '$log', 'AuthService', 'AlertService','$location',
  function($rootScope, $scope, $log, AuthService, AlertService, $location) {
    $log.log('load login page');

    $scope.login = function(credentials) {
      $log.log('press login button');
      $log.log(credentials);

      AuthService.login(
        credentials, function(data, status, headers, config) {
          $log.log('success to call login');
          $log.log(data);
          if (data.status == 200) {

            $log.log('go to default users page');
            //go to home
            $location.path('/users');

          }else if (data.status == 500){

            AlertService.add('danger','不正確的帳號或密碼');
          
          }

        }, function(data, status, headers, config) {
            $log.log('fail to call login');
            AlertService.add('danger','伺服器發生錯誤,請重新再試');
        });
    };

  }
]);


https://coderwall.com/p/r_bvhg

沒有留言:

張貼留言

留個話吧:)