Directive DOM manipulation in Compile

by cmyworld

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.js"></script>
<div ng-controller="MyCtrl">
    <form generate-ng-model="user" name=frm>
        <input type="text" name="email">
        <input type="text" name="age">
    </form>{{user}}</div>

JavaScript

var app = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.user = {
        email: '[email protected]',
        age: 44
    };

}

app.directive('generateNgModel', function () {
    return {
        restrict: 'A',
        compile: function (element, attr) {
            var name = element.children()[0].attributes["name"].value;
            element.children()[0].setAttribute('ng-model', attr['generateNgModel'] + "." + name);
            debugger;
        }
    };
});