Question

我正在尝试将日期对象传递给指令via属性。但是日期被解析为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);
    }
  };
});

输出是： attrs.date：＆＃34; 2015-11-16T07：05：53.159Z＆＃34; 日期：无效日期

我不想使用＆＃39; =＆＃39;来获取范围参数的方式。是否有其他方式将日期发送到指令？

感谢。

Answer 1

目前，您从属性获取价值，然后又将该值从字符串转换为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 );
    }
  };
});

Answer 2

将模板更改为：

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

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

此外，由于您的指令具有隔离范围（范围：{}），因此您不需要在指令属性中使用插值表达式。

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

scope: {
    date: '='
}

在你的链接功能中使用scope.date。

Angular将date对象传递给指令

2 个答案: