AngularJS Directive sample

AngularJS Directive working sample

by andreas_karz

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script type="text/ng-template" id="docwindow.html">
    <p>{{user.firstName}} &nbsp; <input type="text" ng-model="user.lastName" /></p>
</script>


<div ng-controller="mainController">
    <input type="text" ng-model="users[0].firstName" />&nbsp;<input type="text" ng-model="users[0].lastName" />
    <hr />
    <userinfo ng-repeat="user in users" user="user" index="{{$index}}"></userinfo>
</div>

JavaScript

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

myApp.controller('mainController', function($scope) {
    

    $scope.users = [
        {
            firstName : 'Hans', 
            lastName : 'Muster'
        },  
        {
            firstName : 'John', 
            lastName : 'Doe'
        },   
        {
            firstName : 'Heidi', 
            lastName : 'Demo'
        }  
    ];
    

});

myApp.directive('userinfo', function() {
    var directive = {};

    directive.restrict = 'E';

    directive.templateUrl = 'docwindow.html';
    
    directive.scope = {
        user : "=user"
    }

    directive.compile = function(element, attributes) {
        // Wird ausgeführt, wenn das Element kompiliert wird.
        element.css("color", "red");
        console.log('Run compile');

        var linkFunction = function($scope, element, atttributes) {
            // Wird ausgeführt, wenn das Element generiert und mit dem Scope verbunden wird.
                $scope.$parent.$watch('user', function(newValue, oldValue) {
                    console.log('change');
                }, true);
            console.log(atttributes.user);
            $scope.index = atttributes.index;
            
        }

        return linkFunction;
    }
    
    return directive;
});