Question

我需要创建一个我想要使用的指令：

<div before-today="old">{{exampleDate}}</div>

我希望我的指令确定div中的日期是否在“今天”之前，如果是，则应用“old”类。我的主要问题是“exampleDate”从AJAX调用中填充，因此在链接时值为空。有什么建议？这是我到目前为止（不工作）：

angular.module('myApp').directive('beforeToday', [
  function () {
    return {
        restrict: 'A',
    scope: {

    },
      link: function (scope, element, attr) {
        var date = new Date(element.text());
        var today = new Date();
        if (today >= date) {
          element.addClass(attr.beforeToday);
        }
      } 
    };
  }
]);

Answer 1

您可以尝试这样的事情：

<div before-today="old" watch-me="exampleDate" >{{exampleDate}}</div>

<强>指令

angular.module('myApp').directive('beforeToday', [
  function () {
    return {
        restrict: 'A',   
      link: function (scope, element, attr) {


        scope.$watch(attr.watchMe,function(newValue,oldValue){
                //check new value to be what you expect.
             if (newValue){           
                  var date = new Date(element.text());
                  var today = new Date();
                  if (today >= date) {
                    element.addClass(attr.beforeToday);
                  } 
             }
        });
      } 
    };
  }
]);

Answer 2

为什么不使用Angular的内置ngClass而不是编写自己的自定义指令？

<强> HTML

<div ng-class="{'beforeToday': detectDate('2013-11-10') }"> text here </div>

<强>控制器：

$scope.detectDate = function(input){
  var date = new Date(input);
  var today = new Date();
  if (today >= date)
     return true;
  else
     return false;
}

ngClass很棒。传入一个对象，键是有条件地添加/删除的类，值是要计算的表达式。在这个例子中，我传递了一个函数。但你也可以在内联表达式。但是把它放在控制器中可以长期维护。

以角度观察元素值

2 个答案: