Skip to content

Instantly share code, notes, and snippets.

@Mischi

Mischi/lazy-attr.html

Last active January 30, 2016 23:12
Show Gist options
  • Save Mischi/21f98127db0b2ec1a02f to your computer and use it in GitHub Desktop.
Save Mischi/21f98127db0b2ec1a02f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Mischi revised this gist Jan 30, 2016. No changes.
  2. Mischi renamed this gist Jan 30, 2016. 1 changed file with 0 additions and 0 deletions.
    0 index.html → lazy-attr.html
    View file
    File renamed without changes.
  3. Mischi revised this gist Jan 30, 2016. No changes.
  4. Mischi revised this gist Jan 30, 2016. No changes.
  5. Mischi revised this gist Jan 30, 2016. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -75,8 +75,6 @@
    priority: 99999,
    terminal: true,
    compile: function (tElement, tAttrs) {
    // save and prefix attributes
    // TODO: parse "for"
    var lazyAttr = {
    for: tAttrs.lazyFor || '[ng-model]',
    attrs: Object.keys(tAttrs.$attr).map(function (oattr) {
  6. Mischi created this gist Jan 30, 2016.
    103 changes: 103 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,103 @@
    <!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) {
    // save and prefix attributes
    // TODO: parse "for"
    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>