AngularJS手錶指令賦予newValue和oldValue undefined

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

這將是更好的處理超時的服務，而不是在指令：如果你把ng-show="alert.isVisible"在您的指令模板中，angular會自動爲您創建一個手錶。不是像你在做的那樣在服務或集合上，而是直接在對象的屬性上。

在你的服務，你可以設置在add方法超時：

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

Answer 2

scope.$watch已經在尋找電流控制範圍之內。您不需要在監視表達式中提供屬性及其範圍。

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

應該是（財產應作爲一個字符串傳遞文字）的

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