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

Question

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

HTML:

<p 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>
            </p>
            
            

JS：

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

Answer 1

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

Answer 2

ng-repeat="i in [1]"就是遍历数组嘛。[1]就是只有一个元素的数组，而i就是每次遍历的数组子项value值。

至于第二个button为什么点击没反应好像是因为你没有在第二个button绑定点击事件。

不建议使用同名的controller

Answer 3

这是官方文档Developer Guide中Scopes中涉及Scope Events Propagation的示例
示例代码有效，不知你是怎么写的

angular.module('eventExample', [])
.controller('EventController', ['$scope', function($scope) {
  $scope.count = 0;
  $scope.$on('MyEvent', function() {
    $scope.count++;
  });
}]);

https://docs.angularjs.org/guide/scope