angularjs - How to get directive to apply focus to its wrapped input? -
i've built attribute directive (focus-on-event) watches event on $rootscope , when it's triggered sets focus onto attached element.
the problem when want add directive custom directive wrapping input (wrapped-input). need go element , apply focus input.
i tried binding focus event of wrapped-input, never seems triggered. tried broadcasting event doesn't seem work. if can make either approach work, can put focus on wrapped input element right wrapped-input's link function.
how can make work?
angular .module('app', []) .directive('wrappedinput', function() { return { template: '<input placeholder="wrapped input">', link: function(scope, element, attrs) { scope.$on('hello', function() { alert('this never gets called'); }); element.bind('focus', function() { alert('this never gets called either'); }); } } }) .directive('clicktriggers', function($rootscope) { return { scope: { clicktriggers: '@' }, link: function(scope, element, attrs) { element.bind('click', function() { $rootscope.$broadcast(scope.clicktriggers); }); } } }) .directive('focusonevent', function() { return { scope: { focusonevent: '@' }, link: function(scope, element, attrs) { scope.$on(scope.focusonevent, function(onevent, keypressevent) { element[0].focus(); scope.$broadcast('hello'); }); } } }); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script> <div ng-app="app"> <div> <wrapped-input focus-on-event="event1"></wrapped-input> <button click-triggers="event1">trigger 'event1'</button> </div> <div> <input type="text" focus-on-event="event2" placeholder="native input"> <button click-triggers="event2">trigger 'event2'</button> </div> </div>
options:
broadcast rootscope.
broadcast parentscope
emit directive , have parent scope controller catch , broadcast it.
Comments
Post a Comment