<body ng-app="app">
<div ng-controller="ctrl">
<my-son firstname='name' about='about'></my-son>
<br/><br/><br/>
<div>
Controller Scope Variables
<br/>
{{name}}
<br/>
{{about|json}}
<br/>
<a href='#' ng-click='update();'>Update Through Controller</a>
</div>
</div>
</body>var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.name = 'Manish';
$scope.about = {
age: 28,
lastname: 'Prakash'
};
$scope.update = function () {
$scope.about.age += 1;
$scope.name += ' C';
return false;
};
});
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><a href="#" id="update">Update Through Directive</a>',
link: function (scope) {
angular.element(document.getElementById('update')).bind('click', function () {
scope.$apply(function () {
scope.my.age += 1;
scope.firstname += ' D';
});
return false;
});
}
};
});
External CSS
This Pen doesn't use any external CSS resources.