<body ng-app="app">
<div ng-controller="ctrl">
Version Which Doesnt work
<my-son firstname='name' about='about'></my-son>
<br/><br/><br/>
Version Which Works
<my-son firstname='{{name}}' about='{{about}}'></my-son>
</div>
</body>var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.name = 'Manish';
$scope.about = {
age: 28,
lastname: 'Prakash'
};
});
app.directive('mySon', function () {
return {
restrict: 'E',
scope: {
firstname: '@firstname',
my: '@about'
},
template: '<div>My Name is {{firstname}}</div><div>Age {{my.age}} Lastname {{my.lastname}} </div>'
};
});
External CSS
This Pen doesn't use any external CSS resources.