AngularJS Directives - Widget Directive

by ncapito

HTML

<div ng-app="animateApp" ng-controller="TestCtrl">
    <form name="myform">
        <input type="text" ng-model="value1" name="name1">
        <my-directive name="name2" ng-model="value2"></my-directive>
    </form>
</div>

CSS

.boundingBox {
    width: 600px;
    height: 600px;
    background-color: #333333;
    margin:20px;
}
.circle {
    display:block;
    position:absolute;
    height: 20px;
    width: 20px;
    background-color: #999;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}
.box {
    display:block;
    position:absolute;
    height: 20px;
    width: 20px;
}
#controls {
    position: absolute;
    top: 620px;
}

JavaScript

var module = angular.module('animateApp', []).directive('myDirective', function () {
    return {
        template: '<div class="morestuff"><input name="{{name}}" ng-model="ngModel"></div>',
        restrict: 'E',
        replace: true,
        scope: {
            name: '=',
            ngModel: '='
        }
    }
}).controller('TestCtrl', function ($scope) {
    $scope.name2 = 'name2';
    $scope.value2 = 'value2';
    $scope.value1 = 'value1';
    $scope.name1 = 'name1';
});;