angularjs - Can not find element in angular directive? -

i use angular directive input file file type, input variable undefined.

angular.directive("ngupload", function() {     return {         restrict : "a",         template : '<input id="fileinput" name="file" type="file" class="ng-hide" multiple><md-button id="uploadbutton" class="md-raised md-primary"> choose files </md-button>',         link : function (scope, element, attrs) {             var input = element.find('#fileinput');             var button = element.find('#uploadbutton');              if (input.length && button.length) {                 button.click((e) => input.click());             }         },     }; }); 

as stated in documentation jqlite's find limited lookup tag name.

so can either include jquery (before angular.js) retrieve element id or use alternative way grab hold of input.

you don't need id selector since there's 1 input element in template, should work:

var input = element.find('input'); 

also, directive declared on module, not on global angular object.

lastly, don't prefix own directives ng- may clash (future) angular core directives.

a more complete example:

angular.module('mymodule').directive("customupload", function() {     return {         restrict : "a",         template : '<input id="fileinput" name="file" type="file" class="ng-hide" multiple><md-button id="uploadbutton" class="md-raised md-primary"> choose files </md-button>',         link : function (scope, element, attrs) {             var input = element.find('input');             var button = element.find('md-button');              if (input.length && button.length) {                 button.click((e) => input.click());             }         },     }; });