顯示日期的角度指令

我想寫一個角度指令，將<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是我的看法改變。

我敢肯定，有指定單向綁定和重新評估更改，但我很難跟隨文檔！我應該怎麼做？

來源

2013-05-13 JP.

有這裏涉及到一個模型？你可以分享一個笨蛋，小提琴 – Chandermani 2013-05-13 14:27:37

我沒有使用模型，因爲我只希望視圖隨數據更改（不是雙向綁定）。我試圖把它變成小提琴，但我失敗了。這是我到目前爲止：http://jsfiddle.net/jphastings/Ns2Ny/ – 2013-05-13 14:39:00

@JP你需要'ng-app =「myApp」'在該Fiddle中 - 你的console.log語句永遠不會執行，因爲它是沒有在正在使用的Angular應用程序中定義。 – Langdon 2013-05-13 14:42:11

~~除非你使用的角一些奇怪的版本，你的代碼不應該在所有的工作，因爲需要的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標籤是什麼），創建一個名爲time的元素指令（而不是屬性指令）可能更有意義。

更新：基於上述Fiddler，當您定義模塊時，您的ngApp指令需要指向該命名模塊。唯一的一次<html ng-app>將工作是當你正在做一個更簡單的辦法，只是使用像控制器功能：

HTML

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

的JavaScript

function TestCtrl($scope) { 
}

編輯

基於你的問題的變化，因爲你現在正在使用一個元素指令，所以你需要取消日期從不同的地方。正如馬克在上面的意見建議，那個地方是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和at中的內容非常有用。

來源

2013-05-13 14:41:09 Langdon

感謝您的更正 - 我不習慣將我的代碼變成小提琴！工作完成後，我意識到爲什麼我的問題看起來很奇怪 - 我已經更新了上面的文本。 – 2013-05-13 15:14:02

@JP看我的編輯。 – Langdon 2013-05-13 15:43:42

我終於搞清楚at是什麼了。我在看到您的更新之前刪除了我的評論，但我會將其添加回來，以便人們可以跟隨。 – 2013-05-13 15:52:35

所以我想出了at是什麼（我習慣把它看作attrs）。

在你fiddle，因爲你要指定scope屬性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()); 
     } 
    }; 
});

來源

2013-05-13 15:43:13

@蘭登的回答（+1）使用$ watch優於$ parse，如果'temporal'的值可能會改變。 – 2013-05-13 15:47:02

使用過濾器，而不是。內置的日期過濾器：ng-filter:date將爲您處理此問題。

Fiddle

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

（參見上面的文檔你所有的格式選項鍊接angularjs）

來源

2013-05-13 18:45:46

非常好的一點！我將堅持另一個答案 - 但僅僅是因爲我打算在前面寫一些代碼。 – 2013-05-14 08:44:42

顯示日期的角度指令

回答

相關問題