Question

我正在尝试编写一个角度指令，将<time datetime="2012-10-11T12:00:00Z"></time>转换为<time datetime="2012-10-11T12:00:00Z">Thu Oct 11 2012</time>。

到目前为止，我的尝试看起来像这样 - 已经定义了myApp :(也在JSFiddle上）

angular.module('myApp').directive('time', function() {
  return {
    restrict: 'E',
    link: function (scope, el, at) {
      el.text((new Date(at.datetime)).toDateString());
    }
  };
});

但at.datetime未立即填充，因此我发送了undefined，Invalid Date是我的观点更改的内容。

我确定要指定单向绑定并重新评估更改，但我很难按照文档进行操作！我该怎么做？

Answer 1

~~除非您使用的是一些奇怪的Angular版本，否则您的代码根本不起作用，因为module的第二个参数是必需的：~~

除非你已经定义了myApp（我假设你没有），否则上面的代码将不起作用。在定义模块时，需要第二个参数（依赖项列表）：

angular.module('myApp', []); // this creates an app (setter)

angular.module('myApp'); // this creates gives you a reference to an already created app (getter)

否则您的代码似乎工作正常：http://jsfiddle.net/cjWQB/

那就是说，取决于你正在做什么（或者我可能不知道time标签是什么），创建一个命名的元素指令（而不是属性指令）可能更有意义。时间。

更新：基于上面的Fiddler，当您定义模块时，您的ngApp指令需要指向该命名模块。 <html ng-app>唯一有效的时间是采用更简单的方法，只使用控制器功能，如：

HTML

<html ng-app>
    <div ng-controller="TestCtrl">...</div>
</html>

JavaScript

function TestCtrl($scope) {
}

修改

根据您问题的更改，由于您现在正在使用元素指令，因此您需要从其他位置提取日期。正如Mark在上面的评论中所建议的那样，该地点为scope.temporal：http://jsfiddle.net/Ns2Ny/4/

但是直接在你的指令中引用temporal并没有真正使它可重用，所以你想要更加努力，并使用$watch间接引用该值并密切关注它：

http://jsfiddle.net/Ns2Ny/5/

angular.module('myApp',[]) .controller('temporalCtrl', function($scope) { $scope.temporal = "2012-11-10T12:00:00Z"; }) .directive('time', function() { return { restrict: 'E', link: function (scope, el, at) { console.log('scope', scope); console.log('at', at); scope.$watch(at.datetime, function (newValue) { el.text((new Date(newValue)).toDateString()); }); } }; });

记下我的console.log陈述。 scope在调试时的内容非常有用。

Answer 2

请改用过滤器。内置日期过滤器：ng-filter:date将为您解决此问题。

Fiddle

    <time datetime="temporal">{{temporal|date:'EEE MMM d yyyy'}}</time>

（请参阅上面的angularjs docs链接以了解所有格式选项）

Answer 3

所以我弄明白at是什么（我以前把它看作attrs）。

在fiddle中，因为您要将范围属性temporal指定为指令属性值，

<time datetime="temporal">it hasn't rendered</time>

使用$parse在您的指令中获取该属性值：

.directive('time', function($parse) {
    return {
        restrict: 'E',
        link: function (scope, el, attrs) {
            var model = $parse(attrs.datetime);
            el.text((new Date(model(scope))).toDateString());
        }
    };
});

用于显示日期的角度指令

3 个答案: