javascript - Can I have an Angular directive replaced with two elements? -

javascript - Can I have an Angular directive replaced with two elements? -

i writing <password> directive contain <input> followed <span> (an icon allowing user show/hide password). possible have angular replace directive element in html these 2 elements , apply attributes exist on directive element <input> element?

so:

<password ng-model="myvar" ng-change="mytrigger" ng-whatever="mywhatever"></password>

would become:

<span> <input type="password" ng-model="myvar" ng-change="mytrigger" ng-whatever="mywhatever"/> <span ng-click="togglepasswordvisibility()">show/hide</span> </span>

and if user adds other attributes <password> have them applied on <input>.

you have manually on element compile:

.directive('password', function($compile) { homecoming { restrict: 'e', replace: true, template: '<span>' + '<input type="password" />' + '<span ng-click="togglepasswordvisibility()">show/hide</span>' + '</span>'; compile: function($element, $attr) { homecoming function($scope, $element, $attr) { var input = $element.find('input[type=password]'), attributes = $element.prop("attributes"); angular.foreach(attributes, function() { input.attr(this.name, this.value); }); $compile($input)($scope); } } } });

haven't tested it, think way go (probably not best one)

javascript angularjs angularjs-directive