I've been working on creating text boxes using a directive and I want only the first text box to be in focus. To achieve this, I am utilizing another directive for focus control. Below is my script:
<script>
angular.module('MyApp',[]);
angular.module('MyApp').controller('myController',myController);
angular.module('MyApp').directive('myDirective',myDirective);
angular.module('MyApp').directive('textBoxDirective',textBoxDirective);
function myController()
{
}
function myDirective()
{
return{
restrict: 'A',
scope:{
abcd:'='
},
link : function(scope, $element) {
console.log(""+scope.abcd);
if(scope.abcd=='true'){
$element[0].focus();
}
}
};
}
function textBoxDirective()
{
return{
scope:{
efgh:'@'
},
restrict: 'A',
template: '<input type="text" data-my-directive="" data-abcd="efgh">'
};
}
</script>
Here is the corresponding HTML:
<body data-ng-app="MyApp" data-ng-controller="myController">
<div data-text-box-directive="" data-efgh="true"></div>
<div data-text-box-directive=""></div>
<div data-text-box-directive=""></div>
</body>
Despite logging the value of abcd as true once and undefined twice in myDirective, the focusing effect is not being applied on the first textbox. Can anyone please point out what I might be doing incorrectly here? Your insights are appreciated.