Question

我正在尝试使用指令制作警报服务。我用来跟踪我的应用中的所有提醒的服务。我用来显示警报的指令。我在指令中添加了一个监视器，因此我可以为那些需要在一定时间后自动消失的警报添加超时。

但是手表只为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);
    }
  }
});

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>

这是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 = [];
  };

Answer 1

scope.$watch已经在当前控制器范围内查找。您不需要在监视表达式中提供属性及其范围。

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

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

   scope.$watch('alerts', function (newValue, oldValue) { ...
// ^^^^^^ already looking within current controller scope

Answer 2

处理服务中的超时而不是指令会更好：如果将ng-show="alert.isVisible"放在指令的模板中，angular会自动为您创建一个监视。不是你正在做的服务或集合，而是直接在对象的属性上。

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

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

AngularJS在指令中监视newValue和oldValue undefined

2 个答案: