angular.js - Angularjs設定textarea內的預設內容

Question

有比較奇葩的需求。 。就是滑鼠未選取textarea時文字方塊內會有一行灰色的提示語。這個很簡單，用和value，placeholder什麼的就能實現了。但點選選取textarea也就是開始輸入內容時，textarea內要有一行預設填入的內容。 。
沒有圖，我就用格式來解釋一下。

【#我是預設標題# 我是placeholder】-->未選取textarea之前它顯示的內容。
【#我是預設標題# 】-->選取textarea後文字方塊內的內容，placeholder消失但是預設標題保留。

請問這樣的功能要怎麼樣實現？

Answer 1

雷雷

Answer 2

感覺你這個問題還是做成指令比較好，以下就是我的基本實作吧。

html

<p ng-controller="main">
        <textarea my-textarea="#我是默认标题#" placeholder="我是placeholder" ng-model="myText" ng-change="log()"></textarea>
    </p>


    <script type="text/javascript">
    var app = angular.module('app', []);

    app.directive('myTextarea', function() {

        return {

            require: 'ngModel',

            link: function(scope, ele, attrs, modelController) {

                var text = attrs.myTextarea;
                var placeholder = attrs.placeholder;

                var alltext = text + ' ' + placeholder;

                ele.attr('placeholder', alltext);

                ele.on('focus', function() {
                    if (!modelController.$modelValue) {
                        setVal(text);
                    }

                });

                ele.on('blur', function() {
                    if (modelController.$modelValue === text) {
                        setVal('');
                    }
                });

                function setVal(v) {
                    modelController.$setViewValue(v);
                    modelController.$render();
                }

            }

        }

    });

    app.controller('main', ['$scope', function($scope){

        $scope.log = function() {
            console.log($scope.myText)
        }
    }]);

基本想法就是透過model的controller來操控。