angular #4

Transcript

1. AngularJS 1.5.x Marchenkov Danila, Software Developer
2. ng-form input, select, textarea
3. Validation • ngModel + • ngMinLength | ngMaxLength • required | ngRequired • pattern | ngPattern • ngChange
4. css-classes • ng-valid: the model is valid • ng-invalid: the model is invalid • ng-valid-[key]: for each valid key added by $setValidity • ng-invalid-[key]: for each invalid key added by $setValidity • ng-pristine: the control hasn't been interacted with yet • ng-dirty: the control has been interacted with • ng-touched: the control has been blurred • ng-untouched: the control hasn't been blurred • ng-pending: any $asyncValidators are unfulfilled
5. directive.require angular.module('docsTabsExample', []) .directive('myPane', function() { return { require: ['^^myTabs', 'ngModel'], restrict: 'E', transclude: true, scope: { title: '@' }, link: function(scope, element, attrs, controllers) { var tabsCtrl = controllers[0], modelCtrl = controllers[1]; tabsCtrl.addPane(scope); }, templateUrl: 'my-pane.html' }; });
6. Синтаксис • ^ - look for the controller on its own element or its parents • ^^ - searches for the controller on its parents • void - directive would look on its own element only
8. ng-model-options
9. <input type=“text” ng-model=“user.name” ng-model-options="{ updateOn: 'blur' }" />
10. ng-model-options="{ debounce: 500 }" ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
11. А что если я хочу стилизовать input?
12. contenteditable
13. .directive('contenteditable', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { // view -> model elm.on('blur', function() { ctrl.$setViewValue(elm.html()); }); // model -> view ctrl.$render = function() { elm.html(ctrl.$viewValue); }; // load init value from DOM ctrl.$setViewValue(elm.html()); } }; });