AngularJS Live Example

HTML

<script src="http://code.angularjs.org/1.0.0rc6/angular-1.0.0rc6.min.js"></script>
<!doctype html>
<html ng-app="jl">
<head>
    <title></title>
    <script type="text/javascript" src="lib/angular-1.0.0rc6.js"></script>
    <script type="text/javascript" src="js/myapp.js"></script>
</head>
<body>
    <div ng-controller="MyCtrl">
        <h2>Parent Scope</h2>
        <input ng-model="foo">
        <i>//Update to see how parent scope interacts with component scope</i>
        <hr>
        <h2>Directive Scope {{foo}} </h2>
        <jl-my-component
                my-attribute="foo"
                my-evaluate="foo"
                my-accessor="foo"
                my-bind="{{foo}}"
                my-expression="showFoo()"
                >
        </jl-my-component>
        <button ng-click='showFoo()'>
        afficher
        </button>
    </div>
</body>
</html>

CSS

h2{
 font-size: 1.5em;
 font-weight: bold;       
}

strong{
 font-weight: bold;   
}

JavaScript

function MyCtrl($scope) {
    $scope.foo = 42;
    $scope.showFoo = function () {
        alert($scope.foo);
    }
}

angular.module('jl', [])
    .directive('jlMyComponent', function ($defer) {
        return {
            restrict:'E',
            scope:{
                myAccessor:'accessor',
                myAttribute:'attribute',
                myBind:'bind',
                myEvaluate:'evaluate',
                myExpression:'expression'
            },
            template:'<div>' +
                '<div><strong>attribute:</strong> {{myAttribute}} <i>//Don\'t evaluate</i></div>' +
                '<div><strong>evaluate:</strong> {{myEvaluate}} <i>//Evaluate on first digest</i></div>' +
                '<div><strong>accessor:</strong>' +
                '    <div style="padding-left: 1em"><strong>get:</strong> {{myAccessor()}} <i>//Invoke to "get" from parent scope</i></div>' +
                '    <div style="padding-left: 1em"><strong>set:</strong><input ng-model="inputText" ng-change="myAccessor(inputText)"> <i>//Invoke to "set" on parent scope</i></div>' +
                '<div><strong>bind:</strong> {{myBind}} <i>//Bind to parent scope</i></div>' +
                '<div><strong>expression:</strong> <button ng-click="myExpression()">Show Foo</button> <i>//Invoke to evaluate the expression on parent scope</i></div>' +
                '</div>'
        }
    });