Question

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

dropdown-section包含列出所有比赛的按钮下拉列表按名称
schedule-section包含从我的控制器加载的内容显示游戏信息的完整时间表

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

用户在下拉列表中选择一个列表项
此列表项然后调用将使用值的URL ng-repeat调用schedule-controller并返回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>

的JavaScript

app.controller('schedule-controller', function($scope, $http) {
    $http.jsonp("http://www.myurl.com/abc")
        .success(function(response) {
            $scope.schedule = response;
        });
    }
);

Answer 1

您可以使用角度的$broadcast和$on方法来调度和收听事件。

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

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

其次，在schedule-dropdown-controller将$rootScope注入您的控制器并添加updateSchedule方法，以便ng-click属性有效：

$scope.updateSchedule = function(value) {
    $rootScope.$broadcast('update-schedule', {value: value});  
}

第三，更新schedule-controller以侦听事件，并触发日程安排更新：

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

    };

});

您可以使用以下参考资料来了解有关广角事件的广播，发布和聆听的更多信息。

https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope
$on and $broadcast in angular

Angular：在按钮上单击以调用控制器

1 个答案: