如何在Angularjs中動態改變背景顏色

Question

我有一個輪詢器，我已經安裝了2個正在查詢的文件。當新數據被發現時，我試圖在視圖中設置我的文本背景的顏色，但它沒有發生。

如果有人可以解決這個問題，那麼我也歡迎提出改進代碼結構的建議。

服務：

function Poller($http, $timeout) { 

var projectcache = { response: [], calls: 0 }; 
var msgcache = { response: [], calls: 0 }; 
var newdata = false; 
var msgdata = false; 
var msgcolor = {}; 
var projectcolor = {}; 

var poller = function() { 
    $timeout(poller, 10000); 
    console.log("Begin Poller!"); 
    $http.get('http://localhost/app/controllers/php/getProjects.php') 
    .then(function(r) { 
    if (r.data.projects.length > projectcache.response.length) { 
     newdata = true; 
     projectcolor = 'green'; 
    } else { 
     newdata = false; 
     projectcolor = 'green'; 
    }; 
    angular.copy(r.data.projects, projectcache.response); 
    console.log("New Data Found: " + newdata); 
    }); 
    $http.get('http://localhost/app/controllers/php/getMessages.php') 
    .then(function(m) { 
    if (m.data.messages.length > msgcache.response.length) { 
     msgdata = true; 
     msgcolor = 'green'; 
    } else { 
     msgdata = false; 
     msgcolor = 'green'; 
    }; 
    angular.copy(m.data.messages, msgcache.response); 
    console.log("New Msg Found: " + msgdata); 
    }); 
}; 

poller(); 

return { 
    projects: projectcache.response, 
    messages: msgcache.response, 
    newdata: newdata, 
    msgdata: msgdata, 
    msgcolor: msgcolor, 
    projectcolor: projectcolor 
}; 
}; 

查看：

<li ng-class="{active: selectTab=='inbox'}" style="background-color:{{msgcolor}};" ng-click="selectTab='inbox'">Inbox</li> 
<li ng-class="{active: selectTab=='projects'}" style="background-color:{{projectcolor}};" ng-click="selectTab='projects'">Projects</li> 

控制器：

app.controller("taskbarController", ['$scope', 'authData', '$location', 'projectsModal', 'sendMessageModal', 'Poller', 
function ($scope, authData, $location, projectsModal, sendMessageModal, Poller) { 

$scope.msgcolor = Poller.msgcolor; 
$scope.projectcolor = Poller.projectcolor; 
}]); 

Answer 1

我首先想到的是用NG-類此。我發現你已經有了ng-class來處理你的'主動'類的顯示。

如果您想嘗試這種方法，我會： 1.創建您想要更改爲每個狀態/顏色的css類。 （可在外部CSS文件或標記，你在你的頁面的開頭之間營造做到這一點。

.successBackground { 
background-color:green; 
} 

.errorBackground { 
background-color:red; 
} 

修改您納克級的屬性。在這裏，我假設成功的手段這MSGDATA =真實，錯誤意味着MSGDATA =假

當前HTML：

<li ng-class="{active: selectTab=='inbox'}" style="background-color:{{msgcolor}};" ng-click="selectTab='inbox'">Inbox</li> 
<li ng-class="{active: selectTab=='projects'}" style="background-color:{{projectcolor}};" ng-click="selectTab='projects'">Projects</li> 

更新的HTML：

<li ng-class="{active: selectTab=='inbox', successBackground:msgdata===true, errorBackground:msgdata===false}" ng-click="selectTab='inbox'">Inbox</li> 
<li ng-class="{active: selectTab=='projects',successBackground:msgdata===true, errorBackground:msgdata===false}" ng-click="selectTab='projects'">Projects</li> 

現在，當您的msgdata更新時，successBackground和errorBackground會根據最新的msgdata值自動更新。

希望這會有所幫助！

Answer 2

@Elevant，評論選項不允許我設置我的代碼片段的格式，所以我在回覆這篇回覆帖子中的最新評論。

我不確定觀察者是否可以偵聽輪詢對象，或者是否需要分別偵聽每個屬性（msgColor，projectColor）。在我的代碼片段中，我假設我們不能，我們需要分別收聽。

當前代碼：

$scope.msgcolor = Poller.msgcolor; 
$scope.projectcolor = Poller.projectcolor; 

更新與觀察家：

$scope.$watch('Poller.msgcolor', function(newValue,oldValue) { 
     $scope.msgcolor = Poller.msgcolor; 
}); 
$scope.$watch('Poller.projectcolor', function(newValue,oldValue) { 
     $scope.projectcolor = Poller.projectcolor; 
); 

但如果你仍然想調查的選項可移動$超時，我會做如下修改（不知道這匹配你曾嘗試過的）。

1. 在Poller服務定義中刪除$ timeout。更新片段：

   在輪詢

   function Poller($http)

2. 儘管如此，刪除此行：

   $timeout(poller, 10000);

3. 在控制器添加$超時 - 更新片段：

   app.controller("taskbarController", ['$scope', 'authData', '$location',  'projectsModal', 'sendMessageModal', 'Poller','$timeout' 
   function ($scope, authData, $location, projectsModal, sendMessageModal, Poller,$timeout) 
   

4. 然後在控制器中，您可以添加：

 

    $timeout(function(Poller) { 
     Poller.poller(); 
     $scope.msgcolor = Poller.msgcolor; 
     $scope.projectcolor = Poller.projectcolor; 
    }, 10000); 

我希望這有幫助，我沒有機會測試代碼，所以你可能不得不修改它一下。讓我知道事情的後續！