如何在更改选项卡时获取UI Bootstrap选项卡以发送事件

时间:2016-03-08 20:03:33

标签: angularjs twitter-bootstrap-3 tabs event-handling angular-ui-bootstrap

:content

我正在使用上面的UI Bootstrap选项卡,当你在选项卡之间切换时有没有办法让广播事件?

1 个答案:

答案 0 :(得分:13)

您可以使用选项卡上的select属性在控制器中执行执行广播的功能。像这样:

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

添加如上所示的select属性,该属性指向控制器中的函数。我将其命名为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了解详情。