AngularJS在ng-repeat内单击不起作用

Question

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.

Answer 1

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:

1. Add the getArticleContent function to the directive member.
2. Create member directive without isolated scope. There are issues with this though, having two instances of the same directive may cause conflicts.

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.