Mischi/lazy-attr.html

## lazy-attr.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angular-lazy-attr</title>
</head>
<body ng-app="test">
<test-text>
    <lazy-attrs ng-required="v=='asdf'" ng-maxlength="10"></lazy-attrs>
    <lazy-attrs lazy-for="label" class="some-class-via-lazy-attr"></lazy-attrs>
</test-text>

<script src="node_modules/angular/angular.js"></script>
<script>
    'use strict';

    let test = angular.module('test', ['lazyAttr']);
    test.directive('testText', function() {
       return {
           name: 'testText',
           restrict: 'E',
           transclude: true,
           template: `
           <lazy-attrs-container>
                <ng-transclude></ng-transclude>
                <lazy-attrs-container-content>
                    <div>
                        <label for="sample"></label>
                        <input id="sample" name="sample" type="text" ng-model="v"> {{v}}
                    </div>
                </lazy-attrs-container-content>
           </lazy-attrs-container>`,
       }
    });

    let lazyAttr = angular.module('lazyAttr', []);

    test.directive('lazyAttrsContainerContent', function($compile) {
        return {
            name: 'lazyAttrsContainerContent',
            restrict: 'E',
            require:  '^^lazyAttrsContainer',
            link: function (scope, element, attrs, lazyAttrContainer) {
                lazyAttrContainer.lazyAttrs.forEach(function (lazyAttr) {
                    lazyAttr.attrs.forEach(function(attr) {
                        var forElements = element[0].querySelectorAll(lazyAttr.for);
                        // jqLite find() only support tag selectors
                        [].forEach.call(forElements, function(el) {
                            el.setAttribute(attr.name, attr.value);
                        });
                    });
                });

                $compile(element.contents())(scope);
            }
        };
    });

    test.directive('lazyAttrsContainer', function() {
       return {
           name: 'lazyAttrsContainer',
           restrict: 'E',
           controller: function () {
               this.lazyAttrs = [];
           }
       };
    });


    test.directive('lazyAttrs', function() {
        return {
            name: 'lazyAttrs',
            restrict: 'E',
            require: '^^lazyAttrsContainer',
            priority: 99999,
            terminal: true,
            compile: function (tElement, tAttrs) {
                var lazyAttr = {
                    for: tAttrs.lazyFor || '[ng-model]',
                    attrs: Object.keys(tAttrs.$attr).map(function (oattr) {
                        let attr = {
                            name: tAttrs.$attr[oattr],
                            value: tAttrs[oattr]
                        };

                        tElement.removeAttr(attr.name);
                        tElement.attr('lazy-prefix-' + attr.name, attr.value);

                        return attr;
                    })
                };

                return function(scope, element, attrs, lazyAttrsContainer) {
                    lazyAttrsContainer.lazyAttrs.push(lazyAttr);
                }
            }
        }
    });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>angular-lazy-attr</title>
	</head>
	<body ng-app="test">
	<test-text>
	<lazy-attrs ng-required="v=='asdf'" ng-maxlength="10"></lazy-attrs>
	<lazy-attrs lazy-for="label" class="some-class-via-lazy-attr"></lazy-attrs>
	</test-text>

	<script src="node_modules/angular/angular.js"></script>
	<script>
	'use strict';

	let test = angular.module('test', ['lazyAttr']);
	test.directive('testText', function() {
	return {
	name: 'testText',
	restrict: 'E',
	transclude: true,
	template: `
	<lazy-attrs-container>
	<ng-transclude></ng-transclude>
	<lazy-attrs-container-content>
	<div>
	<label for="sample"></label>
	<input id="sample" name="sample" type="text" ng-model="v"> {{v}}
	</div>
	</lazy-attrs-container-content>
	</lazy-attrs-container>`,
	}
	});

	let lazyAttr = angular.module('lazyAttr', []);

	test.directive('lazyAttrsContainerContent', function($compile) {
	return {
	name: 'lazyAttrsContainerContent',
	restrict: 'E',
	require: '^^lazyAttrsContainer',
	link: function (scope, element, attrs, lazyAttrContainer) {
	lazyAttrContainer.lazyAttrs.forEach(function (lazyAttr) {
	lazyAttr.attrs.forEach(function(attr) {
	var forElements = element[0].querySelectorAll(lazyAttr.for);
	// jqLite find() only support tag selectors
	[].forEach.call(forElements, function(el) {
	el.setAttribute(attr.name, attr.value);
	});
	});
	});

	$compile(element.contents())(scope);
	}
	};
	});

	test.directive('lazyAttrsContainer', function() {
	return {
	name: 'lazyAttrsContainer',
	restrict: 'E',
	controller: function () {
	this.lazyAttrs = [];
	}
	};
	});


	test.directive('lazyAttrs', function() {
	return {
	name: 'lazyAttrs',
	restrict: 'E',
	require: '^^lazyAttrsContainer',
	priority: 99999,
	terminal: true,
	compile: function (tElement, tAttrs) {
	var lazyAttr = {
	for: tAttrs.lazyFor \|\| '[ng-model]',
	attrs: Object.keys(tAttrs.$attr).map(function (oattr) {
	let attr = {
	name: tAttrs.$attr[oattr],
	value: tAttrs[oattr]
	};

	tElement.removeAttr(attr.name);
	tElement.attr('lazy-prefix-' + attr.name, attr.value);

	return attr;
	})
	};

	return function(scope, element, attrs, lazyAttrsContainer) {
	lazyAttrsContainer.lazyAttrs.push(lazyAttr);
	}
	}
	}
	});
	</script>
	</body>
	</html>