Question

我正在尝试使用指令创建警报服务。在指令部分我遇到了一些麻烦。我的指令看起来像这样：

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是＆＃34; oldValue.list＆＃34;中的点。在for循环中。知道我做错了吗？

编辑：我正在添加alertService-code（这是我用来跟踪我的应用中的所有提醒的服务）：

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;

});

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

Answer 2

如果你有jQuery可用，试试这个

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

在scope.$watch

内

AngularJS $ watch newValue未定义

2 个答案: