AngularJS watch in指令给出未定义的newValue和oldValue

我正在尝试使用指令进行警报服务。我用来跟踪应用程序中所有警报的服务。以及我用来显示警报的指令。我在指令中添加了一个手表，这样我就可以为那些需要在一定时间后自动消失的警报添加一个超时

但是手表只给出了newValue和oldValue的未定义值。为什么呢？消息添加得很好，但是没有超时。。。一件事是为什么我的指令中的手表不工作，但另一件事是：我以正确的方式处理这个问题，也许我应该做一些完全不同的事情

如下所示的指令：

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

angular.module（'alertModule'）。指令（'ffAlert'，函数（）{
返回{
templateUrl:'components/alert/ff alert directive.html'，
控制器：['$scope'，'alertService'，函数（$scope，alertService）{
$scope.alerts=alertService；
}],
链接：函数（范围、元素、属性、ctrl）{
scope.$watch（scope.alerts，函数（newValue，oldValue）{
log（“警报现在是：”，scope.alerts，oldValue，newValue）；
for（var i=oldValue.list.length；i0）{
$timeout（函数（）{
scope.alerts.list[i].isVisible=false；
}，scope.alerts.list[i].超时）；
}
}
}，对）；
}
}
});

for循环的原因是为已指定的警报附加一个超时（如果在手表启动之前添加了多个警报，则为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>

{{alert.msg}

以下是alertService：

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

  alerts.list = [];

  alerts.add = function(alert) {
    alert.id = id;
    alert.isVisible = true;
    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 = [];
  };

angular.module（'alertModule'）.factory（'alertService'，function（）{
var警报={}；
var-id=1；
alerts.list=[]；
alerts.add=功能（警报）{
alert.id=id；
alert.isVisible=true；
警报。列表。推送（警报）；
alert.id+=1；
console.log（“alertService.add:”，警报）；
返回alert.id；
};
添加（{type:“info”，msg:“Dette er til info…”，超时：1000}）；
alerts.addServerError=函数（错误）{
var id=alerts.add（{type:“warning”，msg:“errormessagefromserver:”+error.description}）；
//日志（“警报服务：服务器错误：”，错误）；
返回id；
};
alerts.close=功能（id）{
对于（var index=0；index而言，最好在服务中而不是在指令中处理超时：如果您将
ng show=“alert.isVisible”
在您的指令模板中，angular将自动为您创建手表。它不会像您所做的那样出现在服务或集合上，而是直接出现在对象的属性上

在您的服务中，您可以在add方法中设置超时：

alerts.add = function (alert) {
  ...
  if (alert.timeout > 0) {
    $timeout(function (){
      alert.isVisible = false;
    }, alert.timeout);
  }
}

最好在服务中而不是在指令中处理超时：如果将
ng show=“alert.isVisible”
放在指令的模板中，angular将自动为您创建一个手表。不是像您现在这样在服务或集合中，而是直接在对象的属性上

在您的服务中，您可以在add方法中设置超时：

alerts.add = function (alert) {
  ...
  if (alert.timeout > 0) {
    $timeout(function (){
      alert.isVisible = false;
    }, alert.timeout);
  }
}

最好在服务中而不是在指令中处理超时：如果将
ng show=“alert.isVisible”
放在指令的模板中，angular将自动为您创建一个手表。不是像您现在这样在服务或集合中，而是直接在对象的属性上

在您的服务中，您可以在add方法中设置超时：

alerts.add = function (alert) {
  ...
  if (alert.timeout > 0) {
    $timeout(function (){
      alert.isVisible = false;
    }, alert.timeout);
  }
}

最好在服务中而不是在指令中处理超时：如果将
ng show=“alert.isVisible”
放在指令的模板中，angular将自动为您创建一个手表。不是像您现在这样在服务或集合中，而是直接在对象的属性上

在您的服务中，您可以在add方法中设置超时：

alerts.add = function (alert) {
  ...
  if (alert.timeout > 0) {
    $timeout(function (){
      alert.isVisible = false;
    }, alert.timeout);
  }
}

scope.$watch
已在当前控制器作用域内查找。不需要在watch表达式中提供属性及其作用域

scope.$watch(scope.alerts, function (newValue, oldValue) { ...

应为（属性应作为字符串文本传递）

scope.$watch
已在当前控制器作用域内查找。不需要在watch表达式中提供属性及其作用域

scope.$watch(scope.alerts, function (newValue, oldValue) { ...

应为（属性应作为字符串文本传递）

scope.$watch
已在当前控制器作用域内查找。不需要在watch表达式中提供属性及其作用域

scope.$watch(scope.alerts, function (newValue, oldValue) { ...

应为（属性应作为字符串文本传递）

scope.$watch
已在当前控制器作用域内查找。不需要在watch表达式中提供属性及其作用域

scope.$watch(scope.alerts, function (newValue, oldValue) { ...

应为（属性应作为字符串文本传递）

应该是scope。$watch（'alerts'）？哦，我知道这一点，我可能很累……谢谢你的回答，但我会接受另一个，因为这会让事情变得更容易。应该是scope。$watch吗（“警报”…？哦，我知道这一点，我可能很累了…谢谢你的回答，但我会接受另一个，因为这会让事情变得更容易。应该是scope吗？$watch（“警报”…？哦，我知道这一点，我可能很累了…谢谢你的回答，但我会接受另一个，因为这会让事情变得更容易。应该是scope吗？$watch（'alerts'…？哦，我知道这一点，我可能很累了…谢谢你的回答，但我会接受另一个，因为这会让事情变得更容易。可能的重复可能的重复可能的重复可能的重复这会让事情变得更容易！谢谢Maarten！哦，我通过剪切isVisible和inste使事情变得更容易广告刚刚关闭了警报，如下所示：警报