自定義指令無法正常工作在NG-重複

Question

您好所有：這是我第一次在這裏問一個問題....

billWatch.HTML

 <ul class="border-and-bg vote-unordered-list bill-link-font"> 
      <li><a ng-click='bill.yea = bill.yea + 1;ctrl.voteYea(1, bill.id, bill.yea)'>Yea</a>:{{bill.yea}} | <a ng-click='bill.nay = bill.nay + 1; ctrl.voteYea(0, bill.id,bill.nay)'>Nay:{{bill.nay}}</a> | **<a ng-click="showComments()">{{filtered.length}} comments</a>** 
      </li> 
     </ul> 


        <div ng-mdoel='ctrl.commentsSection' ng-repeat='($index, comment) in ctrl.billComments | reverseComments | filter: comment.bill_id = bill.id as filtered' class="comments-container" > 

        <div> 
         <show-comment></show-comment> 
         <ul> 

          <li>{{comment.user_name}} | {{comment.comment}} </li> 
         </ul> 

<!--       <ul> 
          <li ng-bing-html> 
           <my-comment></my-comment> 
          </li> 
         </ul> --> 
        </div> 
       </div> 

billwatch.ctrl.js

(function(){ 
angular 
.module('ccApp') 
.controller("BillWatchCtrl', function BillWatchCtrl(){ 

}) 
})(); 

showComment.dir.js

angular.module('ccApp') 
    .directive('showComment', function(){ 

     function link(scope,element,attrs){ 

      scope.showComments = function(){ 

       console.log('showComment'); 
      } 

     } 
     return { 
      restrict: 'EA', 
      link:link 
     }; 
    }) 

我我們省略了大部分控制器代碼。我只是試圖在控制檯標記的on-click中登錄'showComment'。它在ng-repeat塊之外工作，但不在裏面。有人可以幫忙嗎？

謝謝！

Answer 1

免責聲明：
我們可以做一個更細小得多例子或實際推薦使用不同的方法，但因爲它似乎你仍然在你的項目的「技術探索」階段，我只是要給你一隻手正好跟你問:)。

---

你的問題是，被傳遞給你的指令的link功能scope是不一樣的一個外您ng-repeat。
這是因爲ng-repeat指令爲每個元素創建了一個新的scope。

---

如果你想在外面範圍附加function showComments從ng-repeat內，你必須做的，在link回調：

scope.$parent.showComments = function() {/*...*/}; 

相反的：

scope.showComments = function() {/*...*/}; 

但是，通過這種方式，您將重新分配父母的$scope.showComments函數每個評論。一次就夠了！

因此，我建議您只需將您的<show-comment />元素外部ng-repeat。該指令將附加到其容器的scope，並將正確地將您的showComments函數設置在您希望的位置，一次。

---

看看下面的工作片斷，在這裏我簡單地說：

• 連接起來，把你給我們
• 代碼移動<show-comments />元素了

angular 
 
    .module('ccApp', []) 
 
    .controller('BillWatchCtrl', function BillWatchCtrl() { 
 

 
    }) 
 
    .directive('showComment', function() { 
 
    function link(scope, element, attrs) { 
 
     scope.showComments = function() { 
 
     console.log('showing comments...'); 
 
     } 
 
    } 
 
    return { 
 
     restrict: 'EA', 
 
     link: link 
 
    }; 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
 

 
<div ng-app="ccApp"> 
 
    <ul class="border-and-bg vote-unordered-list bill-link-font"> 
 
    <li><a ng-click='bill.yea = bill.yea + 1;ctrl.voteYea(1, bill.id, bill.yea)'>Yea</a>:{{bill.yea}} | <a ng-click='bill.nay = bill.nay + 1; ctrl.voteYea(0, bill.id,bill.nay)'>Nay:{{bill.nay}}</a> | **<button ng-click="showComments()">{{filtered.length}} comments</button>** 
 
    </li> 
 
    </ul> 
 

 
    <show-comment></show-comment> 
 
    <!-- Moved show-comments HERE --> 
 

 
    <div ng-model='ctrl.commentsSection' ng-repeat="($index, comment) in ctrl.billComments | orderBy: '[]': true | filter: comment.bill_id = bill.id as filtered" class="comments-container"> 
 
    <!-- Instead of THERE --> 
 
    <div> 
 
     <ul> 
 
     <li>{{comment.user_name}} | {{comment.comment}}</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>