web-dev-qa-db-ja.com

UIを取得する方法Bootstrapタブが変更されたときにイベントを送信するためのタブ

<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上記のようなタブを使用していますが、タブを切り替えたときにイベントをブロードキャストする方法はありますか？

angularjstwitter-bootstrap-3tabsevent-handlingangular-ui-bootstrap
5
ua_boaz

タブの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 を参照してください。

14
nweg