javascript - AngularJS中ng-repeat问题求解答

问题描述

问 题

求教：如下代码里面的ng-repeat="i in [1]"是什么意思？为什么点击第一个button时<tt>MyEvent</tt> count: {{count}}会发生值得变化，点击第二个button时没反应？

HTML:

<div ng-controller="EventController">
                Root scope
                <tt>MyEvent</tt> count: {{count}}
                <ul>
                    <li ng-repeat="i in [1]" ng-controller="EventController">
                        <button ng-click="$emit('MyEvent')">
                            $emit('MyEvent')
                        </button>
                        <button ng-click="$broadcast('MyEvent')">
                            $broadcast('MyEvent')
                        </button>
                        <br>
                        Middle scope
                        <tt>MyEvent</tt> count: {{count}}
                        <ul>
                            <li ng-repeat="item in [1, 2]" ng-controller="EventController">
                                Leaf scope
                                <tt>MyEvent</tt> count: {{count}}
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            
            

JS：

 function EventController($scope) {
        $scope.count = 0;
        $scope.$on('MyEvent', function() {
            $scope.count++;
        });
    }

解决方案

作用域不同，ng-repeat里的button属于scope的子域即下级域。
因此emmit（向上级域发送消息）可以到达scope，而broadcast（向下级域发送消息）无法到达scope。
建议再看看文档。

这篇关于javascript - AngularJS中ng-repeat问题求解答的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！