Question

我正在与AngularJS合作开展项目并面临一个问题（这似乎是众所周知但我不理解或未能成功应用这些解决方案）：

我尝试将新表（http://demos.creative-tim.com/fresh-bootstrap-table）与ng-view一起使用。当我准备一个没有角度的模板时，一切正常。但是，当我尝试在ng-view中以角度插入此表时，它不再起作用了。

我已经发现这与他们在应答之后使用的javascript代码有关：

<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>

我已经读过很难用Angular执行自定义javascript函数。我不知道该怎么做......

这是我的index.html文件，其中包含ng-view，我试图插入表格：

<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>

以下是视图文件的内容：

<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>

问题是我应该在哪里放置javascript函数？

感谢您的帮助！

Answer 1

我无法看到你在HTML标记中实现ng-view的位置，以及你在javascript函数中添加的位置，这将在与你编写的视图文件相关联的控制器中功能。

在ng视图里面的Bootstrap新鲜的桌子

1 个答案: