我想做一个像选项卡一样的浏览器，但事件将在 Angular 数据表内触发(我使用这个 - angular-datatables )。我已经将 Controller 设置为监听每行的点击以添加动态选项卡。但遗憾的是，它没有添加选项卡。我记录了$scope.tabs数组并发现选项卡已添加但不在 <uib-tabset> 上。请引用下面的截图；
上面的屏幕截图显示了数据表，当我单击突出显示的框(红色)时，它应该在“动态标题 1”选项卡之后添加一个选项卡并将其设置为事件(或当前选定的选项卡)。每次单击一行都会添加一个动态选项卡，我该如何做到这一点？
这是我的 angularJS Controller
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>
最佳答案
您正在更新$scope jQuery 回调中的变量。我相信你可以强制更新<uib-tab>通过使用$apply :
$scope.tabs.push({
title: aData.empid,
content: 'Testing Content'
});
$scope.$apply();
关于javascript - Angular JS Datatables 行单击事件添加动态 AngularUI 选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37086203/