在 ng-view 中引导新表答案

【问题标题】：Bootstrap fresh table inside ng-view在 ng-view 中引导新表
【发布时间】：2016-01-13 15:26:22
【问题描述】：

我正在使用 AngularJS 开展一个项目并面临一个问题（这似乎是已知的，但我不理解或无法成功应用解决方案）：

我尝试在 ng-view 中使用新表 (http://demos.creative-tim.com/fresh-bootstrap-table)。当我准备一个没有角度的模板时，一切正常。但是，当我尝试在 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函数放在哪里？

感谢你们的帮助！

【问题讨论】：

您不能将 jQuery 样式 $().ready 与角度模板混合使用，因为在执行 $().ready 时不会加载模板，而是在导航到模板时加载它们。为了推荐解决方案，有必要查看角度控制器和路由器的代码。

标签： javascript angularjs twitter-bootstrap ng-view

【解决方案1】：

我看不到您在 HTML 标记中实现 ng-view 的位置，并且就您在 javascript 函数中添加的位置而言，这将在与您为其编写函数的视图文件关联的控制器中。

【讨论】：