擴展div以顯示隱藏的內部內容

Question

我是Angular的新手，並且對HTML和CSS感到生疏，所以我想知道如何創建“寫帖子”文本區域（類似於facebook或medium.com），從而首先向用戶顯示一個小的“寫”此處”框，然后當他們單擊書寫區域時，div會展開，然后顯示新的控件。 我在下面添加了一些屏幕截圖，以幫助解釋我的意思。

我知道如何通過指令通過Angular擴展div和進行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指令（ 檢查它們） ，然后從這些函數中設置textarea / div高度。