<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="appCtrl">
<h3>Parent</h3>
<input ng-model="userInfo.firstName">
<br/>
<input ng-model="userInfo.lastName">
<br/>
<input ng-model="salary">
<hr/>
<name-editor user-info="userInfo" salary="salary"></name-editor>
<script>
(function() {
angular
.module('app', [])
.controller('appCtrl', function($scope) {
$scope.userInfo = {
firstName: 'Nam',
lastName: 'Tran'
}
$scope.salary = 3000;
})
.directive('nameEditor', function() {
return {
scope: {
userInfo: '<',
salary: '<'
},
template: [
'<h3>Child</h3>',
'<input ng-model="userInfo.firstName">',
'<br/>',
'<input ng-model="userInfo.lastName">',
'<br/>',
'<input ng-model="salary">'
].join(''),
link: function(scope) {
}
}
})
})();
</script>
</body>
</html>
// Code goes here
/* Styles go here */