Using @ in isolated directive

by gogirl

HTML

<body ng-app="myApp" ng-init="what = 'Angularjs and Bootstrap'">
{{what}}
<hr>


<h4>Supplying immutable attributes for Isolated Scope</h4>
<my-d1>
    <XMP>
        In Dom:
        <my-d2 my-attr1="value one"  my-alias-attr2='value two' my-attr3='value three' my-attr4='value four'>
        </my-d2>
    </XMP>

    OUTPUT2:
    <my-d2 my-attr1="value one"  my-alias-attr2='value two' my-attr3='value three' my-attr4='value four'>
    </my-d2>
</my-d1>
<my-d1>
    <XMP>
        In Dom:
        <my-d2 my-attr1="value one">
        </my-d2>
    </XMP>


    OUTPUT1:
    <my-d2  my-d2 my-attr1="value one">
    </my-d2>
</my-d1>

JavaScript

//Remember: include '' in params of the DI array
    // My Main Application File
    angular.module('myApp', ['myApp.myD1', 'myApp.myD2']);

    // Directive One File
    angular.module('myApp.myD1', []).directive('myD1', function () {
        return {
            restrict: 'E',
            transclude: true,           //scope: { heading: '@', image: '@' },
            template: '<div class="container">' +
                    '<div class="row">' +
                    '<div class="span12">' +
                    '<div class="well">' +
                    '<p ng-transclude>' +
                    '</p>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>',
            replace: true
        }
    });
    // Directive Two File
    angular.module('myApp.myD2', []).directive('myD2', function () {
        return {
            restrict: 'E',
            //  can copy from $attrs into scope
            scope: {
                myAttr1: '@',
                myAttr2: '@myAliasAttr2',
                myAttr4: '@'

            },

            controller: function ($scope, $element, $attrs) {
                // can copy from $attrs to controller
                $scope.myAttr3 = $attrs.myAttr3 || 'Third value is missing';
            },

            template:
                    '<p>myAttr1 = {{myAttr1}} // Passed by my-attr1</p> '+
                    '<p ng-show="myAttr2">myAttr2 = {{myAttr2}} // Hidden or Passed by my-alias-attr2 </p>'+
                    '<p>myAttr3 = {{myAttr3}} // From controller a value always shown</p>'+
                    '<p ng-show="myAttr4">myAttr4 = {{myAttr4}} // Hidden or Passed by my-attr4</p>'
        }
    });