my-sample: <span my-sample></span>
my-sample2: <my-sample2></my-sample2>
my-sample3: <my-sample3></my-sample3>
my-sample4: <span class="my-sample4"></span>
my-sample5: <span my-sample5 samp5-attr="samp5ScopeVar1" samp5-func-attr="getDate()"
samp5-attr-a="5+6" samp5-attr-b="{{5+6}}"></span>
<p></p>
<p>Enter date: <input type="text" date-keys /></p>
<input type='text' ng-model='samp5ScopeVar' />
{{samp5ScopeVar}} @ {{now()}}. {{samp5AttrA}}/{{samp5AttrB}}<br />
// Input field and text to show it
// <span my-sample></span>
angular.module('app').directive('mySample', ['$compile', function ($compile) {
return {
restrict: 'A', // <-- default, doesn't need to be specified.
link: function (scope, element, attrs, controller) {
var markup = "<input type='text' ng-model='sampleData' /> {{sampleData}}<br/>";
angular.element(element).html($compile(markup)(scope));
}
};
}]);
// Version that restricts it to be an element.
// <my-sample2 />
angular.module('app').directive('mySample2', ['$compile', function ($compile) {
return {
restrict: 'E', // <-- indicates it has to be an element
link: function (scope, element, attrs, controller) {
var markup = "<input type='text' ng-model='sampleData2' /> {{sampleData2}}<br/>";
angular.element(element).html($compile(markup)(scope));
}
};
}]);
// Same as mySample2, but using template syntax.
// <my-sample3 />
angular.module('app').directive('mySample3', ['$compile', function ($compile) {
return {
restrict: 'E',
template: "<input type='text' ng-model='sampleData3' /> {{sampleData3}}<br/>"
};
}]);
// Same as mySample3, but using 'C' for class instead.
// <span class="my-sample4"></span>
angular.module('app').directive('mySample4', ['$compile', function ($compile) {
return {
restrict: 'C', // <-- indicates it has to be an class
template: "<input type='text' ng-model='sampleData4' /> {{sampleData4}}<br/>"
};
}]);
// using templateUrl and isolate scope
// <span my-sample5 samp5-attr="samp5ScopeVar1"></span>
angular.module('app').directive('mySample5', ['$compile', function ($compile) {
return {
restrict: 'A',
templateUrl: "sample5.html",
scope: {
samp5ScopeVar: "=samp5Attr", // if samp5ScopeVar matches samp5Attr, then you just need "="
now: "&samp5FuncAttr", // If samp5FuncAttr was called now, we could just say "&"
samp5AttrA: "@", // @ = string
samp5AttrB: "@", // @ = string
} // isolate scope, not inherited.
};
}]);
// Shows how to reject certain keystrokes
// <p>Enter date: <input type="text" date-keys /></p>
angular.module('app').directive('dateKeys', ['$compile', function ($compile) {
return {
restrict: 'A', // <-- default, doesn't need to be specified.
link: function (scope, element, attrs, controller) {
element.on('keydown', function(event) {
if ((event.keyCode >= 48 && event.keyCode <= 57) || // numbers
(event.keyCode === 191) || // forward slash
(event.keyCode === 8) // backslash
) {
return true;
}
return false;
});
}
};
}]);