AngularJs 隐藏所有警报：未捕获的语法错误

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

您忘记在 }); 之前完成工厂。

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

希望对您有所帮助。

AngularJs 隐藏所有警报：未捕获的语法错误

AngularJs hide all alerts: Uncaught SyntaxError

alert

angularjs