SO - 18358744

by Arun P Johny

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<div ng-app="my-app" ng-controller="AppController">
    <ng-form name="myform">
        <gtux-el></gtux-el>
    </ng-form>
</div>

JavaScript

var app = angular.module('my-app', [], function () {
})

app.controller('AppController', function ($scope) {
})

app.directive('gtInputMsg', ['$compile', '$interpolate', '$log', function($compile, $interpolate, $log) {
    function link($scope, element, attrs, ctrls) {
        var modelCtrl = ctrls[0], formCtrl = ctrls[1], msgCtrl = ctrls[2];
        
        element.on('click', function() {
            console.log('gt-input-msg:click', element)
        });
    };
    
    return {
        require : ['ngModel', '^form', 'gtInputMsg'],
        link : link,
        controller: function(){
        }
    };
}]);

app.directive('gtuxTextfield', ['$compile', '$timeout', '$log', function($compile, $timeout, $log) {
    return {
        restrict : 'E',
        template : '<input type="text" name="field" gt-input-msg ng-model="fieldvalue" />',
        replace : true
    };
}]);

app.directive('gtuxEl', ['$compile', '$timeout', '$log', function($compile, $timeout, $log) {
    function link($scope, $element, attrs, ctrl) {
        var $cr = $('<gtux-textfield></gtux-textfield>').appendTo($element);
        $compile($cr)($scope);
    }
    
    return {
        restrict : 'E',
        link : link,
        transclude : true
    };
}]);