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

Question

我是Angular的新手，并且使用HTML和CSS生锈了，所以我想知道如何创建一个“写帖子”文本区域（类似于facebook或medium.com），用户首先会看到小“写在这里”框，然后当他们点击书写区域时，div展开，然后显示新的控件。我在下面添加了一些屏幕截图来帮助解释我的意思。

我理解如何扩展div并通过Angular via指令进行DOM操作，但我只是想知道如何在更高层次上解决这个问题。

然后用户点击上面的内容，div展开，内部内容显示：

我在index.ejs中有以下内容：

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

以及我的角度文件中的以下指令：

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

Answer 1

您可以使用ngFocus和ngBlur指令 - check them - 从这些功能中，您可以设置textarea / div的高度。