Angularjs définit le contenu par défaut dans la zone de texte

Question

J'ai une demande assez étrange. . Autrement dit, lorsque la zone de texte n'est pas sélectionnée par la souris, il y aura une ligne d'invites grises dans la zone de texte. C'est très simple, cela peut être réalisé en utilisant une valeur, un espace réservé, etc. Mais lorsque vous cliquez pour sélectionner la zone de texte, c'est-à-dire lorsque vous commencez à saisir du contenu, il doit y avoir une ligne de contenu remplie par défaut dans la zone de texte. .
Il n'y a pas d'image, je vais donc l'expliquer en utilisant le format.

[#我是defaulttitle# I am placeholder]-->Le contenu affiché avant la zone de texte n'est pas sélectionné.
[#我是defaulttitle#]--> Après avoir sélectionné la zone de texte, le contenu de la zone de texte disparaîtra mais le titre par défaut restera.

Comment implémenter une telle fonction ?

Answer 1

#html
<p ng-controller="DemoCtrl">
    <textarea
            ng-model="content"
            placeholder="{{placeholder}}"
            ng-focus="focus()"
            ng-blur="blur()"></textarea>
</p>

#js
angular.module('app', [])

        .controller('DemoCtrl', function ($scope) {
            var defaultTitle = '#我是默认标题#';
            var defaultPlaceholder = '我是placeholder';
            $scope.placeholder = defaultTitle + ' ' + defaultPlaceholder;

            $scope.content = '';

            $scope.focus = function () {
                if (!$scope.content) {
                    $scope.content = defaultTitle;
                }
            };

            $scope.blur = function () {
                if ($scope.content === defaultTitle) {
                    $scope.content = '';
                }
            };
        })

Answer 2

Je pense qu'il est préférable de transformer votre question en commande. Voici ma mise en œuvre de base.

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)
        }
    }]);

L'idée de base est de le contrôler via le contrôleur du modèle.