自定义指令无法正常工作在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>