AngularJS在ng-repeat內單擊不起作用

Question

我正在使用angularjs進行概念驗證。 我必須在使用ng-click的鏈接上使用click功能。 此ng-click位於ng-repeat內部。 我在這里討論了如何在ng-repeat中使用ng-click的許多已解決問題。 但是不知何故，所有解決方案都沒有用。 有人可以幫我指出我在哪里做錯嗎？

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;
    }
});

單擊鏈接后，此處永遠不會調用getArticleContent方法。

Answer 1

指令成員具有自己的范圍，即孤立的范圍。 並且模板具有ng-click來執行getArticleContent，該成員指令不包含getArticleContent函數。

您有兩種選擇：

1. 將getArticleContent函數添加到指令成員。
2. 創建沒有隔離范圍的成員指令。 但是，這存在一些問題，具有相同指令的兩個實例可能會導致沖突。

OP評論后更新：

我正在添加OP代碼，並將一些數據傳遞給指令進行操作：

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;
    }
});

如果OP可以為我們創建一個jsfiddle以便我們進行審查和修改，則將更加有用。