3

タブ ディレクティブ内のボタンでアクティブなタブを変更しようとしていますuib-tabsetが、ボタンはこのディレクティブの外でのみ機能します。

私は何を間違っていますか？

コードは次のとおりです。

<button type="button" class="btn btn-default btn-sm" ng-click="active = 0">Select first tab - exterior button</button>

<div class="tabs-container">
    <uib-tabset active="active">
        <uib-tab index="0" heading="tab one">
            tab one
        </uib-tab>
        <uib-tab index="1" heading="tab two">
            tab two
            <button type="button" class="btn btn-default btn-sm" ng-click="active = 0">Select first tab - internal button</button>
        </uib-tab>
        <uib-tab index="2" heading="tab three">
            tab three
        </uib-tab>
    </uib-tabset>
</div>
4

2 に答える 2

3

ng-clickあなたの場合の uib-tabディレクティブ内では、外部スコープのプリミティブ変数に書き込もうとしていますが、ローカルスコープで同じ名前（アクティブ）のローカル変数を作成するため、外部スコープへの接続が切断されます。最も簡単な方法は、内側のクリックに $parent.$parent を追加することです。

ng-click="$parent.$parent.active = 0"

正しい外部スコープに到達し (外部スコープ -> uib-tabset -> uib-tab )、その変数を変更します。

別のより良い解決策は、親子スコープ間で対話するときに、オブジェクトを使用してそのプロパティ ( model.activeなど) を変更することです。

<button type="button" 
        class="btn btn-default btn-sm" 
        ng-click="model.active = 0">
  Select first tab - exterior button
</button>

<div class="tabs-container">
  <uib-tabset active="model.active">
    <uib-tab index="0" heading="tab one">
        tab one
    </uib-tab>
    <uib-tab index="1" heading="tab two">
        tab two
        <button type="button" 
                class="btn btn-default btn-sm" 
                ng-click="model.active = 0">
          Select first tab - internal button
        </button>
    </uib-tab>
    <uib-tab index="2" heading="tab three">
        tab three
    </uib-tab>
  </uib-tabset>
</div>
于 2016-10-04T20:25:24.123 に答える
1

ページ上の 2 つのスコープ間に何らかの誤解があることは確かです (おそらく、スコープ変数を適切にuib-tabset追跡しない独自のスコープを作成している可能性があります)。active

この動作する plunkerctrl asを確認してください。構文を使用して、設定するスコープ変数をより明示的に定義していることに気付くでしょうng-click。

これは、問題の原因である可能性が高い、ここで見つかっuib-tabsetた範囲内の双方向バインディングの問題に関する質問です。変数自体にバインドする代わりに、 $scope 関数を使用するか、バインドして設定することをお勧めします。ctrl as$scope.activeactive

于 2016-10-04T20:12:03.923 に答える