AngularJs 隐藏所有警报：Uncaught SyntaxError

Question

我有一个 angularJS 组件，当提交时出现问题时会显示警报，这些警报不会被设计自动关闭。

但是，当用户修复所有错误（屏幕上可能显示许多警报）并提交时，我想关闭这些警报。

基于这个例子https://jsfiddle.net/uberspeck/j46Yh/ 我做了这样的事情：

(function(){    
var mainApp = angular.module("myApp");

function AlertsCtrl($scope, alertsManager) {
    $scope.alerts = alertsManager.alerts;
}

mainApp.factory('alertsManager', function() {
return {
    alerts: {},
    addAlert: function(message, type) {
        this.alerts[type] = this.alerts[type] || [];
        this.alerts[type].push(message);
    },
    clearAlerts: function() {
        for(var x in this.alerts) {
           delete this.alerts[x];
        }
    }
};

mainApp.controller("addUserCtrl", ['Restangular', 'alertsManager', '$alert', 'roles', '$window' , function(Restangular, alertsManager, $alert, roles, $window) {
    var that = this;
    init();

    that.submit = function() {
        var data = {
            user : that.name,
            role : that.role.serverName,
            credentials : that.password1
        }
        Restangular.all("admin").all("user").all("add").post(data).then(function() {
            //$alert({title: 'Add User:', content: 'Completed succefully', type: 'success', container: '#alert', duration: 5, show: true});
            alertsManager.addAlert('Completed succefully', 'alert-success');
            init();
            alertsManager.clearAlerts();
        }, function(reason) {
            //$alerts{title: 'Add User:', content: reason.data.error, type: 'danger', container: '#alert', show: true});
            alertsManager.addAlert(reason.data.error, 'alert-error');
        });
    }

    function init() {
        that.name = "";
        that.roles = roles;
        that.role = that.roles[0];
        that.password1 = "";
        that.password2 = "";
    }
}]);
})();

HTML：

<div ng-controller="addUserCtrl as ctrl">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="panel panel-default">
					<form class="form-horizontal" ng-submit="ctrl.submit()">
						<div class="panel-heading">Add User</div>
						<div class="panel-body">
							<div class="form-group">
								<label for="name" class="col-sm-3 control-label">User Name: <span class="required">*</span></label>
								<div class="col-sm-8">
									<input type="text" class="form-control" id="name" ng-model="ctrl.name"></input>
								</div>
							</div>
							<div class="form-group">
								<label for="role" class="col-sm-3 control-label">Role: <span class="required">*</span></label>
								<div class="col-sm-8">
									<select class="form-control" id="role" ng-model="ctrl.role" ng-options="opt.displayName for opt in ctrl.roles"></select>
								</div>
							</div>
							<div class="form-group">
								<label for="password1" class="col-sm-3 control-label">Password: <span class="required">*</span></label>
								<div class="col-sm-8">
									<input type="password" class="form-control" id="password1" ng-model="ctrl.password1"></input>
								</div>
							</div>
							<div class="form-group">
								<label for="password2" class="col-sm-3 control-label">Re-enter Password: <span class="required">*</span></label>
								<div class="col-sm-8" ng-class="{'has-error' : ctrl.password1 != ctrl.password2}">
									<input type="password" class="form-control" id="password2" ng-model="ctrl.password2"></input>
									<p class="help-block" ng-if="ctrl.password1 != ctrl.password2">Passwords don't match</p>
								</div>
							</div>
						</div>
						<div class="panel-footer">
							<button type="submit" class="btn btn-default" ng-disabled="!ctrl.name || !ctrl.password1 || !ctrl.password2 || ctrl.password1 != ctrl.password2">OK</button>
						</div>
						
						<div ng-controller="AlertsCtrl">
						    <div ng-repeat="(key,val) in alerts" class="alert {{key}}">
						        <div ng-repeat="msg in val">{{msg}}</div>
						    </div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

但我得到了：

未捕获的语法错误：输入意外结束 angular.js:14747 错误：[ng:areq] http://errors.angularjs.org/1.4.3/ng/areq?p0=addUserCtrl&p1=not%20aNaNunction%2C%20got%20undefined

Answer 1

你没有正确完成所有括号。

下面应该是这样的：

mainApp.factory('alertsManager', function() {
  return {
    alerts: {},
      addAlert: function(message, type) {
        this.alerts[type] = this.alerts[type] || [];
        this.alerts[type].push(message);
      },
      clearAlerts: function() {
        for(var x in this.alerts) {
          delete this.alerts[x];
        }
      }
  }
});

你忘记通过});完成工厂了。

这就是缩进如此重要的原因。

希望对您有所帮助。