AngularJS এ নিজের/Custom Directives তৈরি। building-your-own-directives-in-angularjs

AngularJS এর মাধ্যমে নিজের Directives তৈরি।
Md. Shahinoor Islamনিজের Directives তৈরি।
HTML উপাদান, মন্তব্য বা CSS classes দিয়ে Directives প্রদর্শন করতে পার। উদাহরনঃ

<my-directive></my-directive>
<input my-directive>
<!– directive: my-directive–>
<input>

একটি Directive এর ধারনা
angular.module(‘app’, []).directive(‘myDir’, function() {
return myDirectiveDefinition;
});

একটি Button Directive লেখা
escribe(‘button directive’, function () {
var $compile, $rootScope;
beforeEach(module(‘directives.button’));
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it(‘adds a “btn” class to the button element’, function() {
var element = $compile(‘<button></button>’)($rootScope);
expect(element.hasClass(‘btn’)).toBe(true);
});
});
});

button directive ব্যবহার
<button type=”submit”
>Click Me!</button>

একটি Custom Validation Directives প্রবর্তন
একটি Custom Validation directive প্রবর্তন

এই জায়গায় আমাদের একটা test আছে, সুতরাং আমরা directive এর কার্যকারিতা বাস্তবায়ন করতে পারিঃ

myModule.directive(‘validateEquals’, function() {
return {
require: ‘ngModel’,
link: function(scope, elm, attrs, ngModelCtrl) {
function validateEqual(myValue) {
var valid= (myValue === scope.$eval(attrs.validateEquals));
ngModelCtrl.$setValidity(‘equal’, valid);
return valid ? myValue : undefined;
}
ngModelCtrl.$parsers.push(validateEqual);
ngModelCtrl.$formatters.push(validateEqual);
scope.$watch(attrs.validateEquals, function() {
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue);
});
}
};
});

Permanent link to this article: http://bangla.sitestree.com/angularjs-%e0%a6%8f-%e0%a6%a8%e0%a6%bf%e0%a6%9c%e0%a7%87%e0%a6%b0custom-directives-%e0%a6%a4%e0%a7%88%e0%a6%b0%e0%a6%bf%e0%a5%a4-building-your-own-directives-in-angularjs/