将日期对象按角度传递到指令

Angular passing date object to directive

本文关键字：指令 日期 对象      更新时间：2023-09-26

我正试图通过属性将日期对象传递给指令。但是日期被解析为ISO字符串，我无法将其解析为日期对象。

什么是正确和最简单的方法？

这是我的代码：

html:

<body ng-app="myApp">
    <div ng-controller="ctrl">
     <div myDir date={{date}}></div>
    </div>
  </body>

控制器：

var app = angular.module('myApp', []).controller('ctrl', function($scope) {
  $scope.date = new Date();
});

指令：

app.directive('myDir', function() {
  return {
    template: '',
    scope: {},
    link: function(scope, el, attrs){
      console.log('attrs.date: ', attrs.date;);
      var d = new Date(d);
      console.log('date: ', d);
    }
  };
});

输出为：属性日期："2015-11-16T05:53.159Z"日期：无效日期

我不想使用在具有'='的作用域上获取参数的方法。是否有其他方式将日期发送到指令？

谢谢。

当前您正在从属性中获取值，然后再次将该值从字符串转换为date，这就是您的日期变为invalid的原因。

我建议您不要通过属性传递值，而是从指令的隔离范围传递该值，这将在不需要任何转换的情况下传递对象值。

标记

<div my-dir my-date="date"></div>

指令

app.directive('myDir', function() {
  return {
    template: '',
    scope: {
       myDate : '=' //mapped with `my-date` attribute on directive element.
    },
    link: function(scope, el, attrs){
      console.log('date: ', scope.myDate );
    }
  };
});

将模板更改为：

<div my-dir date="date"></div>
</div>

myDir而不是myDir，因为angular对连字符分隔的名称执行规范化，并将其转换为驼色大小写。

此外，由于指令具有隔离作用域（作用域：｛｝），因此不需要在指令属性内插入表达式。

最后，将指令的范围更改为：

scope: {
    date: '='
}

并在链接函数中使用scope.date。

相关文章：