I made some adjustments to your code. The main errors were: enter-user should wrap entires for Angular to locate it with require. Additionally, you need to utilize transclude in this scenario.
Please review the updated code below:
app.directive('enterUser', function () {
return {
restrict: "A",
transclude: true,
templateUrl: 'enter-user.html',
controller: function ($scope) {
$scope.addToList = function (name, age) {
if (typeof $scope.userName != 'undefined' && typeof $scope.userAge != 'undefined') {
$scope.nameList.push({
name: $scope.userName,
age: $scope.userAge
})
$scope.userName = '';
$scope.userAge = '';
}
};
this.delete = function(user) {
if (typeof user != 'undefined') {
$scope.nameList.pop();
}
};
}
};
});
enter-user.html
<div>
<b>Name: </b>
<input ng-model='userName' type='text' />
<br>
<b>Age : </b>
<input ng-model='userAge' type='text' />
<br>
<span class='right'><button ng-click='addToList(userName, userAge);'>Add to List</button></span>
<!-- insert trascluded content here -->
<div ng-transclude></div>
</div>
entires directive
app.directive('entires', function () {
return {
restrict: 'E',
replace: true,
scope: {
user: '='
},
require: '^enterUser',
templateUrl: "entires.html",
link: function (scope, iElement, iAttrs, enterUserCtrl) {
scope.delete = function(user) {
enterUserCtrl.delete(user)
}
}
};
});
index.html
<div enter-user>
<b><u>Here is my entries listed </u></b>
<div ng-repeat="user in nameList">
<entires user="user"></entires>
<br>
</div>
</div>
One more thing to note is that your delete function may not be functioning properly. Just a minor detail to watch out for.