<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app='disabledTest'>
<section ng-controller='DerpController as derp'>
<form name='test'>
<section>
<h1>Goal</h1>
<input ng-model='derp.goal' type='text' name='derp_goal'
ng-minlength='3' ng-maxlength='10' ng-required='true'
ng-pattern='/^\d+$/' ng-focus='derp.action()' ng-blur='derp.validate()'
ng-change='derp.checkValid()'
/>
<button ng-disabled='derp.isValid()'>submit</button>
<div>.{{derp}}</div>
<div>.{{test.derp_goal.$valid}} <span>--- should be false </span></div></div>
</section>
<hr />
<section>
<h2>Fails:</h2>
<div>
<section>
<h4>With attrs.property</h4>
<div >
<input attribs type='text' ng-model="derp.wattrs" name='wattrs' />
<button ng-disabled=''>submit</button>
<div>{{test.wattrs.$valid}}<span>--- should be false </span></div>
</div>
</section>
<hr />
<section>
<h4>with $set prpos</h4>
<input attribs type='text' ng-model="derp.wsets" name='wsets' />
<button ng-disabled=''>submit</button>
<div>{{test.wsets.$valid}}<span>--- should be false </span></div>
</section>
<hr />
<section ng-controller='CtrlCtrl as ctrlr'>
<h4>Via a Controller</h4>
<input type='text' ng-model="ctrlr.modl" name='modl' />
<button ng-disabled=''>submit</button>
<div>{{ctrlr.modl}}</div>
<div>{{test.modl.$valid}}<span>--- should be false </span></div>
</section>
</div>
</section>
</form>
</section>
</body>
</html>
/*
require: 'ngModel' = (scope, elem, attrs, =>model)
"$viewValue", "$modelValue", "$parsers", "$formatters","$viewChangeListeners",
"$pristine", "$dirty", "$valid", "$invalid", "$name", "$render", "$isEmpty",
"$error", "$setValidity", "$setPristine", "$setViewValue"]
*/
/*
elem : jquery
scope : ["$id", "$$childTail", "$$childHead", "$$prevSibling",
"$$nextSibling", "$$watchers", "$parent", "$$phase", "$root",
"this", "$$destroyed", "$$asyncQueue", "$$postDigestQueue",
"$$listeners", "$$listenerCount", "$$isolateBindings"]
*/
/*attrs:
["$$element", "$attr", "accounts", "type", "ngModel", "name"]
also where these would go:
[ "ngMinlength", "ngMaxlength", "ngRequired", "ngPattern",
"ngFocus", "ngBlur", "ngChange", "required", "$$observer ]
*/
var app = angular.module('disabledTest', []);
function action(a, b, c){
alert(a);
alert(b);
alert(c);
}
app.directive('attribs', ['$compile', function($compile) {
return {
require: 'ngModel',
restrict: 'A',
scope: {},
transclude: true,
link: function postLink(scope, elem, attrs, model) {
var a, b, c;
attrs.ngPattern = /^\d+$/;
attrs.ngMinlength = '3';
attrs.ngMaxlength = '10';
a= Object.keys(model);
b= Object.keys(elem);
c= Object.keys(attrs);
attrs.ngChange = function(){
action(a, b, c );
}
$compile(attrs);
$compile(elem)
$compile(scope)
// console.log(a);
// console.log(b);
// console.log(c);
if(model.$valid){
elem.addClass('test');
} else {
elem.removeClass('test');
}
// console.log(attrs);
}
}
}]);
app.directive('wset', ['$compile', function($compile) {
return {
require: 'ngModel',
restrict: 'A',
scope: {},
transclude: true,
link: function(scope, elem, attrs, model) {
var a, b, c;
if(model.$invalid){
elem.addClass('test');
}
attrs.$set('ngMinlength', '3')
attrs.$set('ngMaxlength', '3')
attrs.$set('ngPattern', /^\d+$/);
a= Object.keys(model);
b= Object.keys(elem);
c= Object.keys(attrs);
attrs.ngChange = function(){
action(a, b, c );
}
$compile(attrs);
$compile(elem)
$compile(scope)
// console.log(a);
// console.log(b);
// console.log(c);
}
}
}]);
app.controller("DerpController", ['$scope', '$window','$attrs',
function ($scope, $window, $attrs) {
// console.log(model)
// console.log($sc);
// console.log($el);
// console.log($at)
}
]);
app.controller("CtrlCtrl", ['$scope', '$element','$attrs', '$compile',
function ($scope, $elem, $attrs, $compile) {
var meta = this, a, b,c;
this.meta = meta;
this.ctrlr = meta || {}
this.ctrlr.modl = "abc";
$attrs.$set('ngMinlength', '3')
$attrs.$set('ngMaxlength', '10')
$attrs.$set('ngPattern', /^\d+$/);
a= Object.keys($scope);
b= Object.keys($elem);
c= Object.keys($attrs);
$attrs.$set.ngChange = function(){
action(a, b, c );
}
$compile($scope);
$compile($attrs);
$compile($elem)
$compile($scope)
// console.log(a);
// console.log(b);
// console.log(c);
}
]);
/* Styles go here */
body{
position:absolute;
display: flex;
align-content: center;
align-items:center;
justify-content:center;
height:100%;
width: 100%;
}
button, .test, .ok, input, button{
transition:all 0.4s;
}
button:disabled{
box-shadow: 0 0 5px 2px #aaa;
}
button:enabled, button.ok{
box-shadow: 0 0 5px 2px #cff;
}
.test{
border:2px solid #fbb;
}
.ok{
border:1px solid #ccc;
}
# Confusion
```angular
<form >
<div ng-controller='DerpController as derp'>
<input type='text' name='derp_herp' ng-model='derp.herp'
ng-maxlength='10' ng-minlength='3' ng-required='true'
ng-pattern='/^\d+$/' ng-focus='derp.action()' ng-blur='derp.validate()'
ng-change='derp.checkValid()'
/>
</div>
</form>
```
Long story short, this is not [dry](http://en.wikipedia.org/wiki/Don't_repeat_yourself)
and, from everything I've been taught about front-end web development, in
direct violation of the [Web Standards Model](http://www.w3.org/wiki/The_web_standards_model_-_HTML_CSS_and_JavaScript)
(specifically talking about the ng-change / ng-blur / ng-focus;
model, min, required, ng-controller are fine).