Building Your Own Directives
\nDirectives can appear as HTML elements, attributes, comments, or CSS classes. Examples
\n<my-directive><\/my-directive>
\n<input my-directive>
\n<!– directive: my-directive–>
\n<input><\/p>\n
Defining a Directive
\nangular.module(‘app’, []).directive(‘myDir’, function() {
\nreturn myDirectiveDefinition;
\n});<\/p>\n
Writing a Button Directive
\nescribe(‘button directive’, function () {
\nvar $compile, $rootScope;
\nbeforeEach(module(‘directives.button’));
\nbeforeEach(inject(function(_$compile_, _$rootScope_) {
\n$compile = _$compile_;
\n$rootScope = _$rootScope_;
\n}));<\/p>\n
it(‘adds a “btn” class to the button element’, function() {
\nvar element = $compile(‘<button><\/button>’)($rootScope);
\nexpect(element.hasClass(‘btn’)).toBe(true);
\n});
\n});
\n});<\/p>\n
Using the button directive
\n<button type=”submit”
\n>Click Me!<\/button><\/p>\n
Implementing a Custom Validation Directives
\nImplementing a custom validation directive<\/p>\n
Now we have our tests in place, so we can implement the functionality of the directive:<\/p>\n
myModule.directive(‘validateEquals’, function() {
\nreturn {
\nrequire: ‘ngModel’,
\nlink: function(scope, elm, attrs, ngModelCtrl) {
\nfunction validateEqual(myValue) {
\nvar valid= (myValue === scope.$eval(attrs.validateEquals));
\nngModelCtrl.$setValidity(‘equal’, valid);
\nreturn valid ? myValue : undefined;
\n}<\/p>\n
ngModelCtrl.$parsers.push(validateEqual);
\nngModelCtrl.$formatters.push(validateEqual);<\/p>\n
scope.$watch(attrs.validateEquals, function() {
\nngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
\n});
\n}
\n};
\n}); From: http:\/\/sitestree.com\/?p=844
Categories:AngularJS, By Sayed Ahmed
Tags:
Post Data:2014-02-16 10:00:57<\/p>\n
\t\tShop Online: https:\/\/www.ShopForSoul.com\/<\/a> Building Your Own Directives Directives can appear as HTML elements, attributes, comments, or CSS classes. Examples <my-directive><\/my-directive> <input my-directive> <!– directive: my-directive–> <input> Defining a Directive angular.module(‘app’, []).directive(‘myDir’, function() { return myDirectiveDefinition; }); Writing a Button Directive escribe(‘button directive’, function () { var $compile, $rootScope; beforeEach(module(‘directives.button’)); beforeEach(inject(function(_$compile_, _$rootScope_) { $compile = _$compile_; $rootScope = _$rootScope_; … <\/p>\n
\n\t\t(Big Data, Cloud, Security, Machine Learning): Courses: http:\/\/Training.SitesTree.com<\/a>
\n\t\tIn Bengali: http:\/\/Bangla.SaLearningSchool.com<\/a>
\n\t\thttp:\/\/SitesTree.com<\/a>
\n\t\t8112223 Canada Inc.\/JustEtc: http:\/\/JustEtc.net (Software\/Web\/Mobile\/Big-Data\/Machine Learning) <\/a>
\n\t\tShop Online: https:\/\/www.ShopForSoul.com\/<\/a>
\n\t\tMedium: https:\/\/medium.com\/@SayedAhmedCanada <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"