Angular JS Datatables 行点击事件添加动态 AngularUI Tab

Question

我想做一个类似标签的浏览器，但事件将在 angular 数据表中触发（我正在使用这个 - angular-datatables）。我已经将控制器设置为监听每行的点击以添加动态选项卡。但遗憾的是，它没有添加选项卡。我记录了 $scope.tabs 数组，发现选项卡已添加但不在 <uib-tabset> 上。请参考以下截图；

上面的屏幕截图显示了数据表，当我单击突出显示的框（红色）时，它应该在 "Dyanamic Title 1" 选项卡之后添加一个选项卡并将其设置为活动（或当前选定的选项卡）。每次单击一行时它都会添加一个动态选项卡，我该怎么做？

这是我的 angularJS

控制器

controller.js

app.controller('mainCtrl',['$scope',
                           'API_URL',
                           'DTOptionsBuilder',
                           'DTColumnBuilder',
                           '$resource',
    function($scope, API_URL, DTOptionsBuilder, DTColumnBuilder, $resource){
        $scope.tabs = [
            { title:'Dynamic Title 1', content:'Dynamic content 1' },
        ];

        $scope.model = {

        };

        var vm = $scope;
        vm.dtOptions = DTOptionsBuilder.fromSource(API_URL+'employee')
            .withPaginationType('full_numbers').withBootstrap()
            .withOption('rowCallback', function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
                $('td', nRow).unbind('click');
                $('td', nRow).bind('click', function() {
                    $scope.tabs.push({
                        title: aData.empid,
                        content: 'Testing Content'
                    });
                });
            });

        vm.dtColumns = [
            DTColumnBuilder.newColumn('empid').withTitle('ID'),
            DTColumnBuilder.newColumn('fname').withTitle('First name'),
            DTColumnBuilder.newColumn('lname').withTitle('Last name'),
            DTColumnBuilder.newColumn('position').withTitle('Position'),
            DTColumnBuilder.newColumn('email').withTitle('Email'),
        ];
}]);

这是我的 html

home.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Test</title>

        <!-- Bootstrap -->
        <link href="[[ asset('/css/bootstrap.min.css') ]]" rel="stylesheet">

        <!-- Angular DataTables -->
        <link href="[[ asset('/css/angular/angular-datatables.min.css') ]]" rel="stylesheet">
        <link href="[[ asset('/css/angular/datatables.bootstrap.min.css') ]]" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body ng-app="medrec">
        <div class="container-fluid">
            <div class="row">
                <!-- header -->
            </div>
            <br/><br/><br/><br/><br/>
            <div class="row">
                <div class="col-md-12">
                    <div ng-controller="mainCtrl">
                        <uib-tabset active="active">
                            <uib-tab index="0" heading="Static title">
                                <table datatable="" dt-options="dtOptions" 
                                       dt-columns="dtColumns" class="table table-hover" 
                                       width="100%">
                                </table>
                            </uib-tab>
                            <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
                                {{tab.content}}
                            </uib-tab>
                        </uib-tabset>
                    </div>
                </div>
            </div>
        </div>

        @include('templates.footer')
        <!-- jQuery  -->
        <script src="[[ asset('/js/jquery.2.2.3.min.js') ]]"></script>

        <!-- jQuery DataTables -->
        <script src="[[ asset('/js/jquery.dataTables.min.js') ]]"></script>

        <!-- AngularJS Library -->
        <script src="[[ asset('/app/lib/angular.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-datatables.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-animate.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-route.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-touch.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-resource.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular-sanitize.min.js') ]]"></script>
        <script src="[[ asset('/app/lib/angular.ui-bootstrap.min.js') ]]"></script>


        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="[[ asset('/js/bootstrap.min.js') ]]"></script>
        <script src="[[ asset('/js/angular-datatables.bootstrap.min.js') ]]"></script>

        <!-- AngularJS Modules -->
        <script src="[[ asset('/app/app.js') ]]"></script>

        <!-- AngularJS Config -->
        <!-- script src="[[ asset('/app/config/route.js') ]]"></script -->

        <!-- AngularJS Directives -->
        <!-- script src="[[ asset('/app/controller/directive.js') ]]"></script -->

        <!-- AngularJS Controllers -->
        <script src="[[ asset('/app/controller/main-controller.js') ]]"></script>

    </body>
</html>

Answer 1

您正在从 jQuery 回调中更新 $scope 变量。我相信您可以使用 $apply 强制更新 <uib-tab>：

$scope.tabs.push({
  title: aData.empid,
  content: 'Testing Content'
});
$scope.$apply();

Angular JS Datatables 行点击事件添加动态 AngularUI Tab

Angular JS Datatables row click event add dynamic AngularUI Tab

javascript

angularjs

angular-ui-bootstrap

angular-datatables

angular-ui-bootstrap-tab