javascript - 在选项卡上使用 AngularJS 模型

Question

我有一个选项卡集，有两个选项，我使用 Angular 绑定(bind) JSON 文件中的数据，我想要的是在我的控制台中记录我正在单击的选项卡的名称，所以我是思考使用“模型”，但我不知道这是否正确。

这是我的标签集

<tabset>
  <tab heading="tab1">
    <div class="panenl-body">
        content
    </div>
  </tab>

   <tab heading="tab2">
    <div class="panenl-body">
        content
    </div>
  </tab>
</tabset>

我见过这样的事情:

<div class="radio radio-text" ng-init="topTable.value='topCategory'">
    <label class="radio-inline"><input type="radio" ng-model="topTable.value" value="topCategory" ng-change="updateTotals(topTable.value)">TY Top 30 Categories</label>
    <label class="radio-inline"><input type="radio" ng-model="topTable.value" value="topSupplier" ng-change="updateTotals(topTable.value)">TY Top 10 Suppliers</label>
    <label class="radio-inline"><input type="radio" ng-model="topTable.value" value="topBrand" ng-change="updateTotals(topTable.value)">TY Top 10 Brands</label>
</div>

因此，当您单击单选按钮时，您可以执行某些操作，这与我想做的类似，但使用选项卡集。

Answer 1

我不确定“tabset”指令是在哪里定义的，但是假设您有权访问指令定义:

app.directive('tab', function() {
   return {
       restrict : 'E',
       link : function(scope, element, attrs) {
           element.on('click', function() {
               console.log('This is tab: ', attrs.heading);
           }
       }

   }
});

并在您的 HTML 中:

<tabset>
  <tab heading="tab1">
    <div class="panenl-body">
      content
    </div>
  </tab>

  <tab heading="tab2">
    <div class="panenl-body">
      content
    </div>
  </tab>
</tabset>

这样我们就不会使用 ng-click，因为您没有更新任何作用域或 Controller 对象，因此无需使用 ng-click< 触发摘要周期.