As a beginner in Angular, I may make some mistakes. I created a textField input using 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 added
<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 text is not showing up on the web page. Can anyone point out what mistake I might have made?