2014-08-29 60 views
1

我正在尝试使用指令提醒服务。在指令部分我有一些麻烦。我有一个指令,看起来像这样:

angular.module('alertModule').directive('ffAlert', function() { 
    return { 
    templateUrl: 'components/alert/ff-alert-directive.html', 
    controller: ['$scope','alertService',function($scope,alertService) { 
     $scope.alerts = alertService; 
    }], 
    link: function (scope, elem, attrs, ctrl) { 
     scope.$watch(scope.alerts, function (newValue, oldValue) { 
     console.log("alerts is now:",scope.alerts,oldValue, newValue); 
     for(var i = oldValue.list.length; i < newValue.list.length; i++) { 
      scope.alerts.list[i].isVisible = true; 
      if (scope.alerts.list[i].timeout > 0) { 
      $timeout(function(){ 
       scope.alerts.list[i].isVisible = false; 
      }, scope.alerts.list[i].timeout); 
      } 
     } 
     }, true); 
    } 
    } 
}); 

的原因for循环是附加超时具有此指定的警报。

我还将包括指令模板:

<div class="row"> 
    <div class="col-sm-1"></div> 
    <div class="col-sm-10"> 
    <div alert ng-repeat="alert in alerts.list" type="{{alert.type}}" ng-show="alert.isVisible" close="alerts.close(alert.id)">{{alert.msg}}</div> 
    </div> 
    <div class="col-sm-1"></div> 
</div> 

当我运行这一点,我在控制台中此错误:

TypeError: Cannot read property 'list' of undefined 
    at Object.fn (http://localhost:9000/components/alert/ff-alert-directive.js:10:29) 

10:29在“属性oldValue点。列表“for循环。任何想法我做错了什么?

编辑:我加入alertService代码(这是我用它来保持我的应用程序中的全部警报跟踪服务):

angular.module('alertModule').factory('alertService', function() { 
    var alerts = {}; 
    var id = 1; 

    alerts.list = []; 

    alerts.add = function(alert) { 
    alert.id = id; 
    alerts.list.push(alert); 
    alert.id += 1; 
    console.log("alertService.add: ",alert); 
    return alert.id; 
    }; 

    alerts.add({type: "info", msg:"Dette er til info...", timeout: 1000}); 

    alerts.addServerError = function(error) { 
    var id = alerts.add({type: "warning", msg: "Errormessage from server: " + error.description}); 
// console.log("alertService: Server Error: ", error); 
    return id; 
    }; 

    alerts.close = function(id) { 
    for(var index = 0; index<alerts.list.length; index += 1) { 
     console.log("alert:",index,alerts.list[index].id); 
     if (alerts.list[index].id == id) { 
     console.log("Heey"); 
     alerts.list.splice(index, 1); 
     } 
    } 
    }; 

    alerts.closeAll = function() { 
    alerts.list = []; 
    }; 

    return alerts; 

}); 
+0

alertService是什么? – PSL 2014-08-29 20:44:21

+0

我刚刚在问题中加入了它...... – EricC 2014-08-29 20:46:52

+0

您是否试图在console.log之前将其放在watchcher函数的第一行if(newValue === oldValue)return – 2014-08-29 20:47:02

回答

1

尝试这样,角火灾的守望者在第一时间当你的指令初始化

angular.module('alertModule').directive('ffAlert', function() { 
    return { 
    templateUrl: 'components/alert/ff-alert-directive.html', 
    controller: ['$scope','alertService',function($scope,alertService) { 
     $scope.alerts = alertService; 
    }], 
    link: function (scope, elem, attrs, ctrl) { 
     scope.$watch(scope.alerts, function (newValue, oldValue) { 
     if(newValue === oldValue) return; 
     console.log("alerts is now:",scope.alerts,oldValue, newValue); 
     for(var i = oldValue.list.length; i < newValue.list.length; i++) { 
      scope.alerts.list[i].isVisible = true; 
      if (scope.alerts.list[i].timeout > 0) { 
      $timeout(function(){ 
       scope.alerts.list[i].isVisible = false; 
      }, scope.alerts.list[i].timeout); 
      } 
     } 
     }, true); 
    } 
    } 
}); 
0

,如果您有jQuery的可用,试试这个

if(jQuery.isEmptyObject(newValue)){ 
     return; 
} 

我nside scope.$watch