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来操控。