角：在點擊鏈接調用控制器

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