Javascript 引导刷新表内部ng视图
我正在与AngularJS合作一个项目，面临一个问题（这似乎是众所周知的，但我不理解或无法成功应用解决方案）： 我尝试使用带有ng视图的fresh table（）。当我准备一个没有角度的模板时，一切都很好。但是当我尝试在ng视图中插入这个表时，它不再工作了 我发现这与应答器后使用的javascript代码有关：Javascript 引导刷新表内部ng视图,javascript,angularjs,twitter-bootstrap,ng-view,Javascript,Angularjs,Twitter Bootstrap,Ng View,我正在与AngularJS合作一个项目，面临一个问题（这似乎是众所周知的，但我不理解或无法成功应用解决方案）： 我尝试使用带有ng视图的fresh table（）。当我准备一个没有角度的模板时，一切都很好。但是当我尝试在ng视图中插入这个表时，它不再工作了 我发现这与应答器后使用的javascript代码有关： <script type="text/javascript"> var $table = $('#fresh-table'), $al
<script type="text/javascript">
var $table = $('#fresh-table'),
$alertBtn = $('#alertBtn'),
full_screen = false;
$().ready(function(){
$table.bootstrapTable({
toolbar: ".toolbar",
showRefresh: true,
search: true,
showToggle: true,
showColumns: true,
pagination: true,
striped: true,
sortable: true,
pageSize: 8,
pageList: [8,10,25,50,100],
formatShowingRows: function(pageFrom, pageTo, totalRows){
//do nothing here, we don't want to show the text "showing x of y from..."
},
formatRecordsPerPage: function(pageNumber){
return pageNumber + " rows visible";
},
icons: {
refresh: 'fa fa-refresh',
toggle: 'fa fa-th-list',
columns: 'fa fa-columns',
detailOpen: 'fa fa-plus-circle',
detailClose: 'fa fa-minus-circle'
}
});
});
$(function () {
$alertBtn.click(function () {
alert("You pressed on Alert");
});
});
function operateFormatter(value, row, index) {
return [
'<a rel="tooltip" title="Like" class="table-action like" href="javascript:void(0)" title="Like">',
'<i class="fa fa-heart"></i>',
'</a>',
'<a rel="tooltip" title="Edit" class="table-action edit" href="javascript:void(0)" title="Edit">',
'<i class="fa fa-edit"></i>',
'</a>',
'<a rel="tooltip" title="Remove" class="table-action remove" href="javascript:void(0)" title="Remove">',
'<i class="fa fa-remove"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .edit': function (e, value, row, index) {
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
}
};
</script>
var$table=$（“#新表”），
$alertBtn=$（“#alertBtn”），
全屏=假；
$（）.ready（函数（））{
$table.bootstrapTable({
工具栏：“.toolbar”，
是的，
搜索：对，
是的，
展示栏：没错，
分页：正确，
条纹：是的，
可排序：是的，
页面大小：8，
页面列表：[8,10,25,50100]，
formatShowingRows:函数（pageFrom、pageTo、totalRows）{
//在这里什么都不做，我们不想显示文本“从…显示x/y”
},
formatRecordsPerPage:函数（页码）{
返回页码+“行可见”；
},
图标：{
刷新：“fa刷新”，
切换：“第页列表”，
列：“fa fa columns”，
detailOpen:“fa加圆”，
detailClose:“fa减去圆”
}
});
});
$（函数（）{
$alertBtn.单击（函数（）{
警惕（“你按下了警惕按钮”）；
});
});
函数运算符格式（值、行、索引）{
返回[
'',
'',
''
].加入（“”）；
}
window.operateEvents={
“click.like”：函数（e、值、行、索引）{
警报（'单击类似图标的行：'+JSON.stringify（行））；
console.log（值、行、索引）；
},
“单击.编辑”：函数（e、值、行、索引）{
console.log（值、行、索引）；
},
“click.remove”：函数（e、值、行、索引）{
警报（'您单击删除图标，行：'+JSON.stringify（行））；
console.log（值、行、索引）；
}
};
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SaaS Manager</title>
<meta name="Main" content="Dashboard">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href="../resources/styles/fresh-bootstrap-table.css" rel="stylesheet" />
<link rel="stylesheet" href="../resources/styles/style.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="app.js"></script>
<script src="controllers/dashboardController.js"></script>
<script src="controllers/configurationDetailsController.js"></script>
<script src="services/myService.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row banner">
<div class="col-md-4">
<img src="../resources/images/logo.png">
</div>
<div class="col-md-5">
<h1>My title</h1>
</div>
</div>
<div ui-view></div>
</div>
</body>
</html>
SaaS经理
我的头衔
<div class="container-fluid">
<section class="dashboard">
<div ng-controller ="dashboardCtrl as dashboard">
<div class="fresh-table toolbar-color-orange">
<div class="toolbar">
<h2>Liste des services disponibles</h2>
</div>
<table id="fresh-table" class="table">
<thead>
<th data-field="Nom" data-sortable="true">Nom</th>
</thead>
<tbody>
<tr ng-repeat="configuration in configurations">
<td>{{configuration.service.name}} </td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
服务争议列表
笔名
{{configuration.service.name}
谢谢你们的帮助，伙计们 我看不到您在HTML标记中的何处实现了ng view，至于您在javascript函数中添加了什么，那将是在与您为其编写函数的视图文件相关联的控制器中 不能将jQuery样式
$（）.ready$（）时不会加载模板。ready