我可以在指令中使用匿名函數或代碼作爲屬性嗎？

Question

我可以這樣做：

<div set-height-to="function(){$(this).css($(".sth-elem").height()}"></div> 

!!!!我不想僅設置高度，而是想要更復雜一些，比如觀看元素的CSS樣式，並設置此元素的樣式以及一些偏移，計算或更多。

我將有一個鏈接函數裏面的指令和函數將在某些地方被調用，使我的指令更靈活 我如何綁定一個匿名函數而不是控制器函數或一些JavaScript代碼作爲指令中的屬性？

Answer 1

隨着Class.js，我可以靈活Ë xtend任何指令。

(function (define) { 
    "use strict"; 
    define([ 
     'BaseClass/BaseDirective', 
     'BaseClass/Component' 
    ], function (BaseDirective, Component) { 
     var AnimateWhenHover = BaseDirective.extend({ 
      $animate: null, 
      init: function ($animate, scope, element, attr) { 
       this.$animate = $animate; 
       this._super(scope, element, attr); 
      }, 
      defineScope: function() { 
       var data = this.$scope.$eval(this.$attr.animateWhenHover); 

       this.$scope.selector = data.show; 
       this.$scope.overAnimation = data.over || "l2r"; 
       this.$scope.outAnimation = data.out || "l2r"; 
      }, 
      defineListeners: function() { 
       this.$element.hover(this.in.bind(this), this.out.bind(this)); 
      }, 
      in: function() { 
       this.$element.css({"width": "auto"}); 
       this.$animate.addClass($(this.$scope.selector), this.$scope.overAnimation); 
      }, 
      out: function() { 
       this.$element.css({"width": "50px"}); 
       this.$animate.removeClass($(this.$scope.selector), this.$scope.outAnimation); 
      } 
     }); 

     return new Component("animateWhenHover", ["$animate", function ($animate) { 
      return { 
       scope: '@', 
       restrict: 'A', 
       link: function (scope, element, attr) { 
        new AnimateWhenHover($animate, scope, element, attr) 
       } 
      } 
     } 
     ]); 
    }); 
} 
(define)); 

Answer 2

在您的標記，我會做這樣的：

<div set-height-to=".sth-elem"></div> 

而在你的指令，使用該屬性設置元素爲您在已通過選擇的高度的高度

在。你的指令的鏈接功能，你可以做這樣的事情（語法未驗證）

element.css('height', $(attr.setHeightTo).height());