Angular directive test

by goliney

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="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="Ctrl1">
    <date-picker name="event.name"></date-picker>
</div>

CSS

input[name=ololo] {
    background-color: orange;
}

JavaScript

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

function Ctrl1($scope) {
    $scope.event = {name:"ololo"};
}

app.directive('datePicker', function () {
    return {
        scope: {
            name: '=name'
        },
        restrict: 'AE',
        replace: 'true',
        template: 
            '<div class="date">' +
                '<div class="input-group">' +
                    '<input type="text" ' +
                            'class="form-control" ' +
                            'id="bad-idea-to-make-it-editable-id" ' +
                            'name="{{ name }}" ' +
                            'ng-model="name" ' +
                            'required/>' +
                    '<span class="input-group-addon">' +
                        '<i class="fa fa-calendar"></i>' +
                    '</span>' +
                '</div>' +
            '</div>'
    }
});