angular 1.0.3 Directive Scope

Directive Scope example for 1.0.3

by vaiism

HTML

<script src="http://code.angularjs.org/1.0.3/angular.js"></script>
<!doctype html>
<html ng-app="jl">
<head>
    <title></title>
</head>
<body>
    <div ng-controller="MyCtrl">
        <input ng-model="foo">
        //Update the text to see scope props change
        <hr>
        <jl-my-component
                my-attribute="{{foo}} + 1"
                my-accessor="foo"
                my-bind="{{foo + 1}}"
                my-evaluate="foo + 1"
                my-expression="showFoo()">
        </jl-my-component>
    </div>
</body>
</html>

JavaScript

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

angular.module('jl', [])
    .directive('jlMyComponent', function () {
        return {
            restrict: 'E',
            scope:{
                myAttribute:'@',
                myAccessor:'=',
                myBind: '@',
                myEvaluate: '=',
                myExpression: '&'
            },
            template:'<div>\n    <div><strong>attribute:</strong> {{myAttribute}} //Don\'t evaluate</div>\n    <div><strong>evaluate:</strong> {{myEvaluate}} //Evaluate once</div>\n    <div><strong>accessor:</strong> \n        <input ng-model="myAccessor"> //Get/Set on parent scope</div>\n    <div><strong>bind:</strong> {{myBind}}</div>\n    <div>\n        <strong>expression:</strong> <button ng-click="myExpression()">myExpression</button>\n    </div>\n</div>'
        }
    });