While implementing angularjs directive i have got some issues in sharing controller between directive
i cant access the enterUser directive from the below controller
app.directive('entires', [function () {
return {
restrict: 'E',
replace: true,
scope : {
user : '='
},
require : '^?enterUser',
template:"<div><b>Time : </b>{{user.name}} <b>Task :</b> {{user.age}} <a ng-click='delete(user);'><u>Delete Entry</u></a> <br></div>",
link: function (scope, iElement, iAttrs, enterUserctrl) {
console.log(ctrl)
//here i got enterUserctrl undefined..
// i want like to call delete function from here
enterUserctrl.delete(user);
}
};
}])
here the current working fiddle
While implementing angularjs directive i have got some issues in sharing controller between directive
i cant access the enterUser directive from the below controller
app.directive('entires', [function () {
return {
restrict: 'E',
replace: true,
scope : {
user : '='
},
require : '^?enterUser',
template:"<div><b>Time : </b>{{user.name}} <b>Task :</b> {{user.age}} <a ng-click='delete(user);'><u>Delete Entry</u></a> <br></div>",
link: function (scope, iElement, iAttrs, enterUserctrl) {
console.log(ctrl)
//here i got enterUserctrl undefined..
// i want like to call delete function from here
enterUserctrl.delete(user);
}
};
}])
here the current working fiddle
Share Improve this question asked Dec 18, 2013 at 10:01 nishnish 2561 gold badge6 silver badges15 bronze badges 2-
You got
undefined
becausediv[enterUser]
is not in the parent tree ofdiv[entires]
. – Banana-In-Black Commented Dec 18, 2013 at 10:09 -
Try to
ng-repeat
users in the template of directive enterUser. – Banana-In-Black Commented Dec 18, 2013 at 10:11
2 Answers
Reset to default 5I modified your code a little. Two main errors: enter-user
should wrap entires
so angular could find it for require
. And the second is that you need to use transclude
in your case.
Take a look at the code
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>
Demo Plunker
Also your delete function does not work properly. But this is little thing.
From your code the <div enter-user></div>
is separated from second directive entires
.
If entires
directive uses parent directive enterUser
the structure I think should be something like:
<div enter-user>
<div ng-repeat="user in nameList track by $index">
<entires user="user"></entires>
</div>
</div>
You can see THIS demo that might help you.
^ – Will look for the directive on parent elements, if not available on the same element.
From child directive:
require : '^?enterUser',
If we remove ?
we will get an error that parent directive not found. So this is a issue.