扩展div以显示隐藏的内部内容

Question

I'm new to Angular, and rusty with HTML and CSS, so I was wondering how I could create a "write post" text area (similar to facebook or medium.com), whereby the user is first presented with a small "write here" box, and then when they click on the writing area, the div expands, and then new controls are shown. I've added some screen shots below to help explain what I mean.

I understand how to expand divs and do DOM manipulation through Angular via directives, but I'm just wondering how I should approach this problem at a higher level.

then the user clicks on the above, and the div expands, and inner content is shown:

I have the below in my index.ejs:

    <div write-post-box id="write_post_box">
        <p>Write here...</p>
    </div>

and the below directive in my angular file:

app.directive('writePostBox', function() {
    return {
    link: function(scope, element, attrs){
        element.click(function() {
            element.css('height', '200px');
        });
    }
    };
});

Answer 1

您可以使用ngFocus和ngBlur指令（ 检查它们） ，然后从这些函数中设置textarea / div高度。