Angularjs 角度：在按钮上单击以调用控制器

我是个新手，目前有以下行为：

• 下拉部分包含一个列出所有比赛的按钮下拉列表 名字
• 计划部分包含从我的控制器加载的内容 显示游戏信息的完整时间表

我现在需要实施以下行为：

• 用户在下拉部分中选择一个列表项
• 然后，此列表项调用一个URL，该URL将使用 ng repeat调用调度控制器并返回JSON 只为那场比赛准备的信息
• 然后将相应地更新计划部分

我知道我需要使用ng click事件，但我不确定如何将值传递给控制器

我也不知道如何实现页面加载（所有比赛都加载了），相比之下，点击按钮将根据选择的比赛加载

任何提示都将不胜感激

<div id="dropdown-section" ng-controller="schedule-dropdown-controller">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Competition<span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <div ng-repeat="(name, value) in dropdown.competitions">
                <li><a href="#">{{name}}</a></li>
            </div>
        </ul>
    </div>
</div>
<div id="schedule-section" ng-controller="schedule-controller">
    <div ng-repeat="(scheduleDay, scheduleFields) in schedule">
        <h5 class="schedule-date">{{scheduleDay}}</h5>
        <div ng-repeat="(scheduleField, scheduleEntries) in scheduleFields">
            <p class="schedule-field">{{scheduleField}}</p>
            <table class="schedule-table">
                <tr class="schedule-entry" ng-repeat="scheduleEntry in scheduleEntries">
                    <td class="schedule-info-small">{{scheduleEntry.timeOfGame}}</td>
                    <td class="schedule-info-small">{{scheduleEntry.competition}}:</td>
                    <td class="schedule-info-large">{{scheduleEntry.teamOne}}</td>
                    <td class="schedule-info-medium">{{scheduleEntry.score}}</td>
                    <td class="schedule-info-large">{{scheduleEntry.teamTwo}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

---

您可以通过使用angular的

$broadcast

和

$on

方法分派和侦听事件来实现这一点

首先，在选择计划时更新选择器的标记以广播事件：

<li><a ng-click="updateSchedule(value)">{{name}}</a></li>

第三，更新

计划控制器
以侦听事件，并触发计划更新：

app.controller('schedule-controller', function($scope, $http) {

    init();


    function init() {
        /**
         * Listens for the broadcast of the `update-schedule` event and reloads 
         * schedule data into the scope from an HTTP data source.
         */ 
        $scope.$on('update-schedule', function (events, args){
             loadSchedule(args.value);
        });

        /**
         * If you  need to load some initial schedule data, 
         * make a call to loadSchedule with your default value.
         */
        loadSchedule(someDefaultValue);

    }           

    function loadSchedule(value) {

        /**
         * Since I'm not sure what you need to do with value,
         * you'll need to update your HTTP method w/ value 
         * in the way you need to use it.
         */
        $http.jsonp("http://www.myurl.com/abc")
            .success(function(response) {
                $scope.schedule = response;
            });

    };

});

您可以使用以下参考资料来了解更多有关角度广播、发射和收听事件的信息


$rootScope.Scope

除了应该是$broadcast之外，它工作得非常完美，感谢您对排印错误的支持。很乐意帮忙。
$scope.updateSchedule = function(value) {
    $rootScope.$broadcast('update-schedule', {value: value});  
}

app.controller('schedule-controller', function($scope, $http) {

    init();


    function init() {
        /**
         * Listens for the broadcast of the `update-schedule` event and reloads 
         * schedule data into the scope from an HTTP data source.
         */ 
        $scope.$on('update-schedule', function (events, args){
             loadSchedule(args.value);
        });

        /**
         * If you  need to load some initial schedule data, 
         * make a call to loadSchedule with your default value.
         */
        loadSchedule(someDefaultValue);

    }           

    function loadSchedule(value) {

        /**
         * Since I'm not sure what you need to do with value,
         * you'll need to update your HTTP method w/ value 
         * in the way you need to use it.
         */
        $http.jsonp("http://www.myurl.com/abc")
            .success(function(response) {
                $scope.schedule = response;
            });

    };

});