Question

我想做一个类似标签的浏览器，但事件将在角度数据表中触发（即时使用这个 - 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变量。我相信您可以使用<uib-tab>强制更新$apply：

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

Angular JS Datatables行单击事件添加动态AngularUI选项卡

1 个答案: