angularjs - 如何让 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

您可以使用选项卡上的 select 属性来执行 Controller 中进行广播的函数。像这样:

<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>

像上面一样添加指向 Controller 中函数的 select 属性。我将这个命名为 tabSelected();

现在在您的 Controller 中创建函数:

$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了解更多信息。