不允许在转发器中重复使用?使用'跟踪'表达式以指定唯一键。

时间:2016-12-28 12:10:09

标签: angularjs angularjs-directive angularjs-scope angular-ui-router angular-services

我已为应用程序全局创建通知服务,同时发送数据库调用,在拦截器中捕获错误代码并显示警报。

如何避免角度通知服务中重复的错误消息。 拦截器代码

 var interceptor = function ($q, alerts, $rootScope, $timeout, $location, alertsManager) {

                   return {
                       request: function (config) {
                           console.log(config);
                           return config;
                       },
                       response: function (response) {
                           var deferred = $q.defer();
                           //$rootScope.$broadcast('loginRequired');
                           //$scope.alerts.push({ msg: "Request done !" });
                           return response || $q.when(response);
                      },
                       responseError: function (rejection) {
                           if (rejection.status == 500)
                           {

                               var deferred = $q.defer();                         
                               $rootScope.$broadcast('loginRequired');

                               return $q.reject(rejection);
                           }

                           console.log(rejection.status);
                           return $q.reject(rejection);
                       }
                   }
               };

            $httpProvider.interceptors.push(interceptor);

调用服务器调用响应的控制器内部。

 LoginService.AfterLogin(UserName, Password)).then(function (response) {

        },function (status) {

                        if (status === 500) {

                          alert("200");

                            $rootScope.$on("loginRequired", function (e) {                           

                             alertsManager.addAlert('Technical Error Occurred.Please contact the System Administrator for the further support!!', 'alert-success');
                            });

                        }

                    });

工厂警报服务

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

方法一:

<div ng-controller="AlertsController">        
            <div ng-repeat="(key,val) in alerts" class=" alert {{key}}" id="alert-notify">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <div ng-repeat="msg in val">{{msg}}</div>
            </div>
</div>

enter image description here 方法一: 方法2: 当我使用$ index跟踪时,会重复。

<div ng-controller="AlertsController">        
            <div ng-repeat="(key,val) in alerts track by $index" class=" alert {{key}}" id="alert-notify">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <div ng-repeat="msg in val track by $index">{{msg}}</div>
            </div>
</div>

enter image description here

1 个答案:

答案 0 :(得分:0)

尝试使用msg(或msg.someKey,当它是一个对象时)而不是$ index

<div ng-repeat="msg in val track by msg">{{msg}}</div> 

但是msg需要不相同。试试这个

<div ng-repeat="(key,val) in alerts track by key" class=" alert {{key}}" id="alert-notify">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <div ng-repeat="msg in val track by $index">{{msg}}</div>
            </div>

$ index适合第二次中继