Question

Angular的新功能并且卡在选项卡上。我正在尝试在angularJS中使用<tabset>和<tab>，并尝试在我的html中点击给定的TAB时调用ng-click上的函数。但是，由于某种原因，该方法不会被调用，我无法打印我选择的选项卡。这是代码：

<div class="wrapper wrapper-content animated fadeIn">
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h1 style="text-align:center">Submitted Deliveries</h1>
    </div>
</div>
<br>
<div class="row">
    <div class="col-lg-12">
        <div class="tabs-container">

            <tabset>
                <tab ng-repeat="priority in vm.priorities" ng-click="vm.setTab(priority)" heading={{priority}}>
                    <div class="panel-body">
                        <delivery-directive></delivery-directive>
                    </div>
                </tab>
            </tabset>

        </div>
    </div>
</div>

</div>

 // Controller
 (function() {

'use strict';

angular.module('app.deliveries')
        .controller('DeliveriesController', DeliveriesController);

DeliveriesController.$inject = ['DeliveriesService', 'APP_CONFIG', '$interval', 'WorkspaceService'];

function DeliveriesController(deliveriesService, APP_CONFIG, $interval, workspaceService){

    var vm = this;
    vm.priorities = [];     // priorities are based the names of each workspace.
                            // So call the workspace end point from the workspaceService
                            // to get a list of all workspace. Then assign it to the priorities.

    vm.setTab = setTab;

    return init();

    function init(){
        workspaceService.getWorkspaces().then(function(workspaceResponse){
            vm.priorities = workspaceResponse;
        });
    }

  // This function does not get called and doesn't print anything
    function setTab(priority){
        console.log(priority);
    }
}

})();

这里有什么建议吗？

Answer 1

您是否正在使用tabset和tab的指令，例如angular-ui？如果是这样，那么dom节点可能会被移动，使得您点击的东西与您认为单击的dom节点不同。对于angular ui，选项卡有一个您将使用的select事件处理程序：

  <tabset>
      <tab ng-repeat="priority in vm.priorities" select="vm.setTab(priority)" heading="{{priority}}">...</tab>
  </tabset>

注意：angular-ui的最新版本使用uib-前缀，现在为

 <uib-tabset> 
     <uib-tab ng-repeat="priority in vm.priorities" select="vm.setTab(priority)" heading="{{priority}}">...</uib-tab>      
 </uib-tabset>

使用ng-click在<tab>中进行AngularJS ng-repeat以选择选项卡

1 个答案: