角：在点击链接调用控制器

Question

我新的角度和有以下行为，目前的工作：

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

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

• 用户选择下拉截面列表项
• 此列表项，然后调用将使用值在 NG重复调用日程表控制器和刚刚返回JSON 信息的URL对于竞争
• 日程表部分将被相应地更新

我知道我需要使用NG击事件，但我不知道如何在价值传递给控制器​​

我也不清楚如何实现这个页面加载（所有比赛被加载），相比上点击按钮将加载基于选定

任何提示的竞争，将不胜感激

<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-点击属性适用于：

$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