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

I «Опустил большую часть кода контроллера. Я только пытаюсь запустить showComment в консоли on-click тега привязки. Он работает за пределами блока ng-repeat, но не внутри него. Может кто-нибудь помочь?

Спасибо!

Answer 1

Отказ от ответственности:
Мы могли бы сделать гораздо мельче пример или на самом деле рекомендуют использовать разные подходы, но так как кажется, вы все еще в «технической разведки» фазы вашего проекта, я просто хочу дать вам рука с тем, что вы просите :).

---

Проблема у вас есть то, что scope, который переходит в руки link функции вашей директивы не то же самое, как один вне ваш ng-repeat.
Это потому, что директива ng-repeat создает a новый 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>