JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.angularjs.org/1.2.27/angular.js"></script>
<div ng-app="app">
<form name="aForm">
model value: {{blah}}<br />
invalid: {{aForm.blah.$error.required}}<br />
<input name="blah" ng-model="blah" placeholder="enter something" required="required" /><br /><br />
model value: {{blah2}}<br />
invalid: {{aForm.blah2.$error.required}}<br />
<input name="blah2" ng-model="blah2" placeholder="{{blah}} enter something" ng-required="true" />
</form>
{{blah2}}
</div>
JavaScript
angular.module('app', ['taiPlaceholder']);
/**
* Placeholder for non-HTML5 browsers ... specifically IE8 and IE9, but also
* works with Firefox 3 and possibly others.
*
* Always toggles on/off the placeholder class (default is "placeholder").
* Shims in the visual effects for older IE.
*
* Quick Usage:
*
* <input ng-model="xyz" placeholder="Enter Value" />
*
* <textarea ng-model="xyz" placeholder="Enter Value"
* placeholder-class="placeholder"></textarea>
*
* Styling:
*
* Browsers still use specific placeholder selectors. IE8 and 9 can now style
* the text with a `placeholder` class.
*
* .placeholder { color: red; }
*
* @link https://github.com/tests-always-included/angular-placeholder
* @license MIT
*/
/*global angular*/
(function (undef) {
"use strict";
var propName, needsShimByNodeName;
propName = 'placeholder';
needsShimByNodeName = {};
angular.module("taiPlaceholder", []).directive("placeholder", [
"$document",
function ($document) {
// Determine if we need to perform the visual shimming
angular.forEach([ 'INPUT', 'TEXTAREA' ], function (val) {
needsShimByNodeName[val] = $document[0].createElement(val)[propName] === undef;
});
/**
* Determine if a given type (string) is a password field
*
* @param {string} type
* @return {boolean}
*/
function isPasswordType(type) {
return type && type.toLowerCase() === "password";
}
return {
require: "ngModel",
restrict: "A",
link: function ($scope, $element, $attributes, $controller) {
var className, currentValue, text;
text = $attributes[propName];
className = $attributes[propName + "Class"] || propName;
//...