Question

我的所有问题都在标题中：如何根据一天中的时间更改背景DIV？

我尝试过传统的Javascript：

var d = new Date(event.starthourid),
    h = d.getHours(event.starthourid),
    i;

    if (h < 06) i = "night.jpg";
    else if (h < 11) i = "sunrise.jpg";
    else if (h < 18) i = "sunny.jpg";
    else if (h < 21) i = "sunset.jpg";
    else i = "night.jpg";

document.getElementById("header-item").style.backgroundImage = "url("+i+")";

但是自从我遇到ng-class和ng-style后，我明白自己做错了。我怎样才能完成上述“Angular”方式？

Answer 1

在这种情况下，我认为您可以更好地使用ngClass，因此，如果您想要更新图像位置，则不必记住这些样式的来源。当然，ngClass和ngStyle都是指令，因此它们是在AngularJS中进行DOM操作的正确位置，如@ daniel-beck所述。

以下是如何使用ngClass的示例：

＆＃13;

var app = angular.module('demo', []);

app.controller('MyTimeCtrl', function($scope){
    var h = new Date().getHours();
    if (h <= 18) {
      $scope.time="day";
    } else {
      $scope.time="night";
    }
  
});

＆＃13;

.main {
  height: 100vh;
  min-height: 100px;
}
.night {
  background-color: black;
  color: white;
}
.day {
  background-color: yellow;
  color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="MyTimeCtrl" class="main" ng-class="time">
    <p>It's {{time}}!</p>
  </div>
</div>

＆＃13;

Answer 2

Angular需要一种与你习惯的完全不同的思维方式 - 而不是绘制DOM然后用它来挖掘它。 getElementById为它们找到元素和Do Stuff，你创建了一些指令，当它们在DOM中呈现时，它们会自行填充。

因此，对于此示例，您可以执行类似

的操作

.directive('myHeaderItem', function () {
    return {
        template: '<div style="background-image: url({{bgImage}})">...</div>',
        link: function (scope, element) {

        var h = new Date().getHours();
        var i;

        if (h < 06) i = "night.jpg";
        else if (h < 11) i = "sunrise.jpg";
        else if (h < 18) i = "sunny.jpg";
        else if (h < 21) i = "sunset.jpg";
        else i = "night.jpg";

        scope.bgImage = i; // to pass values to the directive template, attach them to scope
    };
})

...然后在您的HTML中，您只需添加<div my-header-item></div>。

跟进：正如jme11在评论中指出的那样，更好的编码风格是从指令中设置一个css类，而不是一个图像URL，即你的指令模板是'<div class="{{foo}}">'（设置foo到绘制所需背景图像的css类名。）

或者，您可以将更多的逻辑移动到模板本身而不是指令中（在这种情况下执行此操作没有多大意义，但为了完整性，这里是您将如何做到这一点：）

.directive('myHeaderItem', function () {
    return {
        template: '<div ng-class="{
            'sunrise': h>=6 && h<11, 
            'sunny': h>=11 && h<18, 
            'sunset': h>=18 && h<21,
            'night': h>=21 || h<6
        }">...</div>', // will result in i.e. <div class="sunny">...</div>
        link: function (scope, element) {
        scope.h = new Date().getHours();
    };
})

根据一天中的时间更改背景DIV

2 个答案: