占位符不适用于文本字段输入

Question

I'm a newbie in Angular, so my apologies in advance for any silly mistakes. I have defined a textField input through a directive in Angular:

.directive('textField', function () {
    return {
        restrict: 'E',
        scope: true,
        require: 'ngModel',
        template: '{{start}}<span class="text-field-cursor">{{end}}</span>',
        controller: 'TextFieldController',
        link: function (scope, elem, attrs, ngModel) {
            scope.keyboardOptions.limitTo = parseInt(attrs.limitTo);
            scope.keyboardOptions.caps = _.has(attrs, 'caps');

            scope.model = ngModel;

            elem.bind('click', function () {
                scope.openKeyboard();
            });

            elem.on('$destroy', function clickDestroyElement() {
                elem.unbind();
            });
        }
    };
})

Then, on my HTML, I wrote

 <text-field class="text-field" data-t-username focusable request-focus="true" ng-class="{ 'is-focused': (focused || active), 'is-active': active }" ng-model="data.username" placeholder='Enter your username here' limit-to="32"></text-field>

However, the placeholder is not being visualized on the web page. What am I doing wrong?

Answer 1

In your directive, the template isn't an input. So the placeholder can't work.

You can change span to input or other directive who work with placeholder.