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

声明：
我们可以做一个更小的例子，或者实际上建议使用不同的方法，但是因为看起来你仍处于项目的“技术探索”阶段，我只是简单地告诉你一个问题{{1 }}

您遇到的问题是，传递到指令的:)功能的scope与外部 link的功能不同。
这是因为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 }; })

自定义指令在ng-repeat中不起作用

1 个答案: