Question

我有一个Poller，我已经设置了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-class。我看到你已经有了ng-class处理你的活动＆＃39;类。

如果您想尝试这种方法，我会： 1.为要更改的每个州/颜色创建css clases。（可以在外部css文件中或在页面开头创建的标签之间执行此操作。

.successBackground {
background-color:green;
}

.errorBackground {
background-color:red;
}

修改ng-class属性。在这里，我假设成功意味着msgdata = true而错误意味着msgdata = false

当前的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，评论选项不允许我格式化我的代码片段，所以我在回复帖子中回复了你的最新评论。

我不确定观察者是否只能收听Poller对象，或者是否需要单独监听每个属性（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;
);

虽然如果您仍想查看移动$ timeout的选项，我会进行以下更改（不确定这是否与您尝试的相符）。

在Poller服务定义中删除$ timeout。更新了代码段：
```
function Poller($http)
```
仍然在Poller中，删除此行：
```
$timeout(poller, 10000);
```

在Controller中添加$ timeout - 更新的片段：

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

然后在控制器中添加：


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

我希望这有帮助，我没有机会测试代码，所以你可能不得不稍微修补一下。让我知道它是怎么回事！

如何动态更改Angularjs中背景的颜色

2 个答案: