2013-05-01 66 views
2

我想有一個指示,通知用戶數據已更改(例如通過更改顏色,搖晃,滑動等)。一個簡單的例如將是這樣的:ng動畫在transcluded指令

HTML:

<change watch="heartbeat">{{heartbeat}}</change> 

指令:

angular.module('module').directive('change', function($timeout) { 

    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) { 
      scope.$watch(attrs.watch, function(value) { 
       element.addClass("changed"); 
       $timeout(function() { 
        element.removeClass("changed"); 
       }, 600); 
      }); 
     } 
    } 
}); 

如何更改上面的指令,以便它使用ngAnimate功能?我一直在尋找$ animator服務,但是我無法弄清楚如何使它適合上述模型。

+1

這是什麼問題,有transclusion辦?這似乎並沒有用這個示例指令使用transclusion。 – Jmr 2013-05-01 22:36:07

+0

@Jmr我除去了明確的轉換,以保持示例簡單,因爲簡單的背景更改不需要模板。在上面的代碼中添加模板:不會改變鏈接功能。 – 2013-05-02 10:24:47

+0

[jsfiddle](http://jsfiddle.net/LMC8V/)與明確的轉換。這是同樣的問題,顯式或隱式的轉換。如何在包裝其他內容的指令中使用ngAnimate功能? – 2013-05-02 13:43:41

回答

1

我相信這是目前不可能的。

ngAnimate指令只支持5種預設動畫觸發事件在這一刻(V1.1.4):

  • 進入
  • 離開
  • 移動
  • 顯示
  • 隱藏

以上各項均爲再加上特定的DOM操作操作,並且您期望實現的內容不適合這5個類別中的任何一個,因此可能直到支持自定義動畫事件。

更多的說明可以在這裏找到: http://gsklee.im/post/50254705713/nganimate-your-angularjs-apps-with-css3-and-jquery

+1

請提及自定義動畫也是如此。這些在1.1.5中得到支持。 http://www.yearofmoo.com/2013/05/enhanced-animations-in-angularjs.html#custom-animations – matsko 2013-05-27 15:10:51