我可以在指令中将匿名函数或代码作为属性吗?

时间:2014-05-05 13:18:29

标签: angularjs angularjs-directive anonymous-function

我可以这样做:

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

!!!!我不想仅设置高度,但更复杂的事情就像观看元素的CSS样式一样,并使用一些偏移,计算等设置此元素的样式。

我将在指令中有一个链接函数,并且会在某些地方调用函数out以使我的指令更加灵活 如何绑定匿名函数而不是Controller函数或某些JavaScript代码作为指令中的属性?

2 个答案:

答案 0 :(得分:2)

在你的标记中我会这样做:

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

在你的指令中使用这个属性将元素的高度设置为你传入的选择器的高度。

在指令的链接功能中,您可以执行以下操作(语法未验证

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

答案 1 :(得分:0)

使用Class.js,我可以灵活地扩展任何指令。

(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));