Question

我有一个自定义指令来格式化datetime。我在多个视图中使用它，它似乎全面工作，除了一个实例。当request.created传递给它时（下面的HTML），第一个console.log（范围）表示“date”被正确设置并传递给指令。但是console.log（scope.date）打印为空。

我在同一视图中都能正常处理其他视图和几个“email.sendDate”。

请求的值从服务器检索并由控制器设置。

myApp.directive('friendlydate', function () {
   function link(scope, element, attrs) {
       console.log(scope);
       console.log(scope.date);
       var uglydate = scope.date;
       //do stuff
        scope.formatteddate = prettydate;
    };

   return {
       restrict: 'E',
       scope: {
         date: '@'
       },
       link: link,
       template: '{{formatteddate}}'
   };
});

在我的HTML中，我有

<div class="col-md-6">
  <dl class="dl-horizontal">
    <dt>Created</dt>
    <dd>
      <friendlydate date="{{request.created}}"></friendlydate>
    </dd>
    <dt>IP Address</dt>
    <dd>{{request.ipAddress}}</dd>
    <dt>Browser</dt>
    <dd>{{request.browser}}</dd>
  </dl>
</div>

<table>
  <tbody ng-repeat="email in request.emails">
    <tr>
      <td>
        <friendlydate date="{{email.sendDate}}"></friendlydate>
      </td>
      <td>{{email.subject}}</td>
      <td>{{emailStatus(email.status)}}</td>
      <td><button class="btn btn-primary">view</button></td>
    </tr>
  </tbody>
</table>

enter image description here

如果需要更多信息，请与我们联系。我快要疯了，请帮忙。

Answer 1

我建议你采用不同的方法，使视图更加干净，易于维护。

用户a angular.module('myApp.filters', []) .filter('frieldyDate', function($moment, $translate) { return function(value, format) { if(format){ // you can pass parameters and return custom formats // return formatWithFormat(value,format); } return friendlyFormat(value); }; });

<div class="col-md-6">
  <dl class="dl-horizontal">
    <dt>Created</dt>
    <dd> {{request.created | friendlyDate: 'MM/YYY'}} </dd>
    <dt>IP Address</dt>
    <dd>{{request.ipAddress}}</dd>
    <dt>Browser</dt>
    <dd>{{request.browser}}</dd>
  </dl>
</div>

<table>
  <tbody ng-repeat="email in request.emails">
    <tr>
      <td>{{email.sendDate | friendlyDate}} </td>
      <td>{{email.subject}}</td>
      <td>{{emailStatus(email.status)}}</td>
      <td><button class="btn btn-primary">view</button></td>
    </tr>
  </tbody>
</table>

您的模板将

create column table some_names
     (ID bigint not null primary key generated by default as IDENTITY,
      NAME nvarchar(30));

另外，建议您将angular-moment用于不同的日期格式

Answer 2

您的数据将从服务器中检索并由控制器设置。您的响应可能会有延迟。如果是这种情况，我的解决方案适合您。

在您的视图中使用ng-if：

<friendlydate date="{{request.created}}" data-ng-if="request.created"></friendlydate>

或者你可以在你的指令中使用范围。$ watch：

myApp.directive('friendlydate', function () {
function link(scope, element, attrs) {
    scope.$watch(function () {
        console.log(scope);
        console.log(scope.date);
        var uglydate = scope.date;
        //do stuff
        scope.formatteddate = prettydate;
    });
};

return {
    restrict: 'E',
    scope: {
        date: '@'
    },
    link: link,
    template: '{{formatteddate}}'
};

}）;

Angularjs指令 - 无法从隔离范围中检索值

2 个答案: