Angularjs ng-click ng-repeat內部不起作用

我正在研究使用angularjs的概念證明。我必須在我使用ng-click的鏈接上使用點擊功能。這個ng-click在ng-repeat內部。我在stackoverflow中解決了如何在ng-repeat中使用ng-click的問題。但不知何故，沒有任何解決方案奏效。有人能幫我指出我犯的錯誤嗎？Angularjs ng-click ng-repeat內部不起作用

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方法在此處不會被調用。

來源

2015-12-22 Sanjay

您正在使用使用隔離範圍。你怎麼能期望它不會與範圍參數綁定工作？ –

@AnikIslamAbhi。我是角度js的新手。我對範圍概念不太瞭解。我用$ parent.member.itemId。即使那樣，它不起作用。這是你說的嗎？ – Sanjay

它是獨立的範圍它不會從父母或父母任何東西沒有約束與範圍 –

指令成員有它自己的範圍，意思是隔離範圍。模板具有ng-click來執行getArticleContent，該成員指令不包含getArticleContent函數。

你有兩個選擇：

添加getArticleContent功能指令成員。

創建沒有隔離範圍的成員指令。雖然存在一些問題，但具有相同指令的兩個實例可能會導致衝突。

我加入了一些數據傳遞給指令進行操縱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

OP評論後更新審查和修改。

來源

2015-12-22 03:11:24 Will

你的意思是說我必須使用像app.directive（'getArticleContent'，函數（））？ – Sanjay

Angularjs ng-click ng-repeat內部不起作用

回答

相關問題