展開div以顯示隱藏的內容

Question

我是Angular的新手，並且使用HTML和CSS生鏽，所以我想知道如何創建「寫文章」文本區域（類似於facebook或medium.com），從而用戶首先出現一個小的「在這裏寫入」框，然後當他們點擊寫入區時，div展開，然後顯示新的控件。我在下面添加了一些屏幕截圖，以幫助解釋我的意思。

我明白如何通過Angular via指令來擴展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指令 - check them - 以及這些功能你可以設置textarea/div的高度。