I am working on a proof of concept where I am using angularjs. I have to use a click function on the links for which I am using ng-click. This ng-click is inside ng-repeat. I went through so many solved problems here in stackoverflow on how to use ng-click inside ng-repeat. But somehow, none of the solutions worked. Can some one help me to point out where I am doing the mistake?
HTML Code :
<collection collection='tasks'></collection>
<collection collection='articleContent'></collection>
app.directive('collection', function () {
return {
restrict: "E",
replace: true,
scope: {
collection: '='
},
template: "<ul><member ng-repeat='member in collection' member='member'></member></ul>"
}
});
app.directive('member', function ($compile) {
return {
restrict: "E",
replace: true,
scope: {
member: '='
},
template: "<li><a href='#' ng-click='getArticleContent(member.itemId)'>{{member.title}}</a></li>",
link: function (scope, element, attrs) {
if (angular.isArray(scope.member.tocItem)) {
if(scope.member.hasChildren == "true")
{
for(var i=0;i<scope.member.tocItem.length;i++){
if(scope.member.tocItem.title) {
scope.member.tocItem.title.hide = true;
}
}
}
element.append("<collection collection='member.tocItem'></collection>");
$compile(element.contents())(scope)
}
}
}
});
app.controller('AbnTestController', function($scope) {
var bookId ="";
$scope.tasks = data;
$scope.getArticleContent = function(itemId){
alert('inside article content');
$scope.articleContent = articleData[0].articleContent;
}
});
on click of the link, getArticleContent method is never called here.
Directive member has it's own scope, meaning isolated scope. And the template has an ng-click to execute getArticleContent, that the member directive does not contain the getArticleContent function.
You have two choices:
Updated after OP comment:
I'm adding OP code with some data passed to directives for manipulation:
app.directive('collection', function() {
return {
restrict: "E",
replace: true,
scope: {
collection: '=',
articleData: '=',
articleContent: '='
},
template: "<ul><member ng-repeat='member in collection' member='member' article-data='articleData' article-content='articleContent'></member></ul>"
}
});
app.directive('member', function($compile) {
return {
restrict: "E",
replace: true,
scope: {
member: '=',
articleData: '=',
articleContent: '='
},
template: "<li><a href='#' ng-click='getArticleContent(member.itemId)'>{{member.title}}</a></li>",
link: function(scope, element, attrs) {
scope.getArticleContent = function(itemId) {
alert('inside article content');
scope.articleContent = articleData[0].articleContent;
}
if (angular.isArray(scope.member.tocItem)) {
if (scope.member.hasChildren == "true") {
for (var i = 0; i < scope.member.tocItem.length; i++) {
if (scope.member.tocItem.title) {
scope.member.tocItem.title.hide = true;
}
}
}
element.append("<collection collection='member.tocItem'></collection>");
$compile(element.contents())(scope)
}
}
}
});
app.controller('AbnTestController', function($scope) {
var bookId = "";
$scope.tasks = data;
$scope.getArticleContent = function(itemId) {
alert('inside article content');
$scope.articleContent = articleData[0].articleContent;
}
});
It would be more helpful if OP can create a jsfiddle for us to review and revise.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.