AngularJS Example:
by Slava Fomin II
HTML
<div ng-app="application">
<div ng-controller="ApplicationController">
<form novalidate>
<div class="form-group">
<label for="fullName" class="control-label">Full Name:</label>
<div class="control">
<input
id="fullname"
name="fullName"
class="form-control"
type="text"
placeholder="Full Name"
ng-model="user.fullName"
required
>
</div>
</div>
<div class="form-group">
<label for="about" class="control-label">About:</label>
<div class="control">
<input
id="about"
name="about"
class="form-control"
type="text"
placeholder="About"
ng-model="user.about"
required
>
</div>
</div>
</form>
</div>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<style>
form {
margin: 50px;
}
JavaScript
angular.module('application', [])
.controller('ApplicationController', function($scope) {
$scope.user = {
fullName: 'John Doe',
about: ''
};
})
.directive('input', function() {
return {
restrict: 'E',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
if (null === ngModel) {
return;
}
scope.$watch(attrs.ngModel, function(value) {
console.log([
'Value set to: ' + value,
ngModel
]);
});
}
};
})
;