如何讓UI Bootstrap選項卡在選項卡發生變化時發送事件

Question

<uib-tabset type="tabs"> 
    <uib-tab heading="Event Workflow Activities"> 
    <div ng-include src="'webapp/event/EventWorkflowActivities.tpl.html'"></div>   
    </uib-tab> 
</uib-tabset> 

我使用的UI Bootstrap選項卡類似上面，是否有任何方式在選項卡之間切換時獲得廣播事件？

Answer 1

您可以使用選項卡上的選擇屬性來執行控制器中執行廣播的功能。像這樣：

<uib-tabset type="tabs"> 
    <uib-tab heading="Event Workflow Activities" select="tabSelected()"> 
      <div ng-include src="'webapp/event/EventWorkflowActivities.tpl.html'"></div>   
    </uib-tab> 
</uib-tabset> 

添加類似上面的選擇屬性，指向您的控制器中的函數。我將其命名爲tabSelected（）;

現在在你的控制器創建函數：

$scope.tabSelected = function() { 
    //Broadcast or emit your event here. 

    // firing an event upwards 
    $scope.$emit('yourEvent', 'data'); 

    // firing an event downwards 
    $scope.$broadcast('yourEvent', { 
     someProp: 'value' 
    }); 
}; 

看看在documentation以獲取更多信息。