Question

嘿大家我正在为我的公司构建一个移动应用程序，我有一个angularjs功能，目前根据它是白天还是晚上添加一个css类。它根据日夜图像来制作完美无瑕的图像。

我遇到的问题是，在时钟之前测试应用程序时，请说从1:59到2，它不会更改背景图像，直到您刷新页面。我希望它能够自动更改背景图像而无需刷新，似乎无法找到方法。我会在这里链接代码！

任何帮助都值得赞赏，因为它让我完全难过......

以下是我在html中的内容。

<div class="dashboard-welcome" ng-class="{'hide-homescreen-image-landscape' 
: isLandscape, 'homescreenImageDay' : isDay, 'homescreenImageNight' : 
isNight }">

这是调用函数的地方

angular.module('starter').controller('homeCtrl', ['$scope', '$interval', 
'jsBridge', 'authService', 'tierService', '$window', fnc]);

function fnc($scope, $interval, jsBridge, authService, tierService, $window) 
{
    $scope.$on('$ionicView.afterEnter', function (event, viewData) {
        setOrientation();

        $scope.isDay = !isDayTime(1000);
        $scope.isNight = isDayTime(1000);
    });

这是实例化函数的地方。基本上检查它的时间。

var isDayTime = function () {
        var h = new Date().getHours();
        if (h >= 14) {
            return true;
        } else {
            return false;
        }
    }

我无法提供所有代码，因为这个应用程序长达数千行，但这是现在的工作功能。只需要它来切换背景图像而不用刷新使用angularjs ......

Answer 1

假设您在div中使用的是background-image: url("...")

我建议你设置一个对象来保存一个$ scope.isDay值，而不是两次进行计算。

还可以使用$interval服务检查每n毫秒来更新$ scope.isDay值。

以下代码可以使用CSS类动态更改页面上的背景图像。

HTML：

<div ng-class="data.isDay ? 'back1' : 'back2'"></div>

JS：

var exampleApp = angular.module('exampleApp', []);

exampleApp.controller('exampleController', function($scope, $interval) {
  $scope.data = {
    isDay: true,
    classVal: {
      one: 'text-danger',
      two: 'text-success'
    }
  };

  $interval(function() {
        $scope.toggleImage();
      }, 600);

  $scope.toggleImage = function() {
    $scope.data.isDay = ($scope.data.isDay ? false : true)
  };

  $scope.toggleImage();
});

这里也是一个plnkr demo

更新背景图像而不刷新angularjs

1 个答案: