Follow the presentation on your favorite device @ http://bit.do/peled
(there will be code so it's easier up close)
<form name="demoForm">
<div ng-class="{'has-error': !demoForm.email.$valid}">
<input type="email" ng-model="email" name="email" required>
<span ng-show="demoForm.email.$error.email">Please enter a valid email</span>
</div>
<div ng-class="{'has-error': !demoForm.pword.$valid}">
<input type="password" ng-model="pword" name="pword" required ng-minlength="8">
<span ng-show="demoForm.pword.$error.minlength">Password too short!</span>
</div>
<button type="submit">Register</button>
</form>
Supports:
number, url, email, required, ng-minlength, ng-maxlength, ng-pattern
<form name="demoForm" ng-submit="register()">
... </form>
app.controller('MainCtrl', function($scope) {
$scope.register = function(){
if($scope.demoForm.$valid)
$scope.loggedin = true;
}
});
<input type="email" ng-model="email"
ng-model-options="{updateOn: 'blur'}">
<input type="password" ng-model="password"
ng-model-options="{updateOn: 'default', debounce: {'default':500}}">
Configuration that delays the update of the model
updateOn
A space separated array of triggers
debounce
Integer or object that defines the delay for each trigger
<input type="email" ng-model="email" name="mail" no-dogs required>
...
<span ng-show="demoForm.mail.$error.noDogs">No dogs allowed!</span>
app.directive('noDogs', function factory(){
return {
require: '?ngModel',
link: function linking(scope, element, attr, ctrl){
if(ctrl){
ctrl.$parsers.push(function(value){
if(/dog/.test(value)){
ctrl.$setValidity("noDogs", false);
return undefined;
} else {
ctrl.$setValidity("noDogs", true);
return value;
}
});
}
}
}
});
<item-selector list="answers" ng-model="selection" name="ans" required />
<span ng-show="demoForm.ans.$error.required">
Hint - It's salty
</span>
<div class="btn-group item-selector">
...
<ul class="dropdown-menu">
...
<li ng-repeat="item in list">
<a href="" ng-click="select(item)">
<img src="{{item}}">
</a>
</li>
</ul>
</div>
app.directive('itemSelector', function factory(){
return {
templateUrl: "itemSelectorTemplate.html",
replace: true,
restrict: "E",
require: 'ngModel',
scope: {
list: "=",
value: "=ngModel"
},
link: function linking(scope, element, attr, ctrl){
scope.tries = 5;
scope.select = function(item){
ctrl.$setViewValue(item);
}
ctrl.$viewChangeListeners.push(function(){
scope.tries --;
})
}
}
});
<item-selector list="answers" ng-model="selection" name="ans" required>
<a href="" ng-click="select(item)">
<img src="{{item}}">
</a>
</item-selector>
<span ng-show="demoForm.ans.$error.required">Hint - It's salty</span>
<div class="btn-group item-selector">
...
<ul class="dropdown-menu" role="menu">
...
<li ng-repeat="item in list" ng-transclude></li>
</ul>
</div>
app.directive('itemSelector', function factory(){
return {
...
transclude: true,
...
link: function linking(scope, element, attr, ctrl){
...
}
}
});
<item-selector list="answers" ng-model="selection" name="ans" required>
<div class="button">
<img src="{{item}}" class="img-thumbnail">
<a href="" ng-click="select(item)" class="btn"> Select </a>
</div>
</item-selector>
<item-selector list="answers" ng-model="selection" name="ans" required>
<a href="" ng-click="select(item)" class="btn"> {{item}} </a>
</item-selector>
var html = '<div ng-bind="exp"></div>';
var template = angular.element(html);
var linkFn = $compile(template);
var element = linkFn(scope);
parent.appendChild(element);
<ul>
<li ng-repeat="item in list">
{{item.name}}
</li>
</ul>
$scope.list = getList();
$scope.$watch("list", function(){
...
});
var newScope = $rootScope.$new();
newScope.name = "Roy";
var linkFunc = $compile("<span>Hello {{name}}</span>");
var el = linkFunc(newScope);
console.log(el); // returns <span>Hello Roy</span>
myModule.directive('directiveName', function factory(injectables) {
return {
link: {
pre: function preLink(){...},
post: function postLink(){...)
}
}
});
* when supplying link with a function instead of pre and post, the default will be postLink
function postLink(scope, iElement, iAttrs, controller, transcludeFn){ ... }
$scope.name = { first: "Roy" }
<my-directive my-field="name.first"></my-directive>
myModule.directive('directiveName', function factory($parse) {
return {
link: function(scope, iElement, iAttrs){
var getter = $parse(iAttrs.myField);
// returns a getter for "name.first
var fieldValue = getter(scope);
// returns "Roy"
}
}
});
<div class="btn-group item-selector">
...
<ul class="dropdown-menu my-transclusion"></ul>
</div>
app.directive('itemSelector', function factory(){
return {
...
transclude: true,
...
link: function linking(scope, element, attr, ctrl, transcludeFn){
...
var trascludeContainer = getElement(".my-transclusion");
scope.$watch("list", function(list){
if(list){
angular.forEach(list, function(item){
var newScope = scope.$new();
newScope.item = item;
transcludeFn(newScope, function(element){
trascludeContainer.append(element);
})
});
}
})
}
}
});