Angular: get element within component

Question

Suppose I have a component like this

app.component('test',{
    template: '<input type="text" id="inputbox"></input>',
    controller: function() {
        ctrl.focusInput = function(){
                var inputbox = document.getElementById("inputbox");
                inputbox.focus();
            }
        };
    }    
});

I would like to get the DOM element for the input so I can focus it whenever I want. However inputbox falls in global scope which will be a problem if I use this component more than once. How can I get the DOM just for the input in this component - either by restricting scope of inputbox or using some other mechanism?

Answer 1

You could inject the element that triggered the component to controller function like below:

Since $element is jqLite wrapped object, you can use jQuery DOM traversal methods like children and find to find the input element.

 angular .module('myApp', []); angular .module('myApp').component('test', { template: '<input type="text" id="inputbox"></input>', controller: function($scope, $element, $attrs) { var ctrl = this; ctrl.focusInput = function() { $timeout(function() { $element.find('input').focus(); }, 0); }; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <div ng-app="myApp"> <test></test> </div>