Angular: custom input directive

http://angularjs.org/

by Željko Szep

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <input id="custom" my-input>

</div>

JavaScript

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

myApp.directive('myInput', function () {
    return {
        restrict: "EA",
        transclude: true,
        replace: false,
        ///template: "<div>{{label}}<div ng-transclude></div></div>",
        template: "<div>Opis: <div ng-transclude></div></div>",
        compile: function (element, attributes) {

            element.css('color', 'red');
            //element.after('<div id="space">added</div>');
            console.log(element);
            //element[0].outerHTML ='<div>I should not be red</div>';
            console.log("simple compile", arguments);
            return {
                pre: function (scope, element, attributes, controller, transcludeFn) {
                    console.log("simple pre", arguments);
                },
                post: function (scope, element, attributes, controller, transcludeFn) {
                    console.log("simple post", arguments);
                }
            }
        },
        controller: function ($scope, $element) {
            console.log("simple controller", arguments)
        }
    };
});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}