Question

如果我刷新页面，数据表将加载，但不会点击＆＃34; list＆＃34;。我觉得它没有被正确初始化，但不确定。我不确定如何在点击＆＃34; list＆＃34;

时应用指令来加载数据表数据

重写的代码：

<body ng-app="RT.Routing">
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="add_publisher">
                        <a href="#/list"><i class="fa fa-list"></i> Publishers</span></a>
                    </li>
                    <li class="publisher">
                        <a href="#/test"><i class="fa fa-list"></i> Link 2</a>
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>
<div ng-view></div>
</div>
<script type="text/ng-template" id="embedded.list.html">
<div id="page-wrapper">
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
          <div class="panel-body">
              <div class="table-responsive">
                  <table class="table table-striped table-bordered table-hover" id="publishers">
                      <thead>
                          <tr>
                            <th>ID</th>
                            <th>Publisher</th>
                            <th>Integration</th>
                            <th>Contact</th>
                            <th>Status</th>
                          </tr>
                      </thead>
                  </table>
              </div>
          </div>
      </div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="embedded.test.html">
<div id="page-wrapper">
<div class="container">
<h2>Header</h2>
<h4>Other Content</h4>
</div>
</div>
</script>



<script type="text/javascript">
var routingExample = angular.module('RT.Routing', []);
routingExample.controller('testController', function ($scope) {});
routingExample.controller('ListController', function ($scope) {});
routingExample.config(function ($routeProvider) {
    $routeProvider.
    when('/test', {
        templateUrl: 'embedded.test.html',
        controller: 'testController'
    }).
    when('/list', {
        templateUrl: 'embedded.list.html',
        controller: 'ListController'
    }).
    otherwise({
        redirectTo: '/list'
    });
});
</script>
</body>

以下JS已被列入上面的HTML文件的标题

(function($){

$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
    "ajax": "php/table.publishers.php",
    "table": "#publishers",
    "fields": [
        {
            "label": "Publisher",
            "name": "publisher",
            "type": "text"
        },
        {
            "label": "Integration",
            "name": "integration",
            "type": "select",
            "ipOpts": [
                {
                    "label": "Turn Key ",
                    "value": "Turn Key "
                },
                {
                    "label": " Custom",
                    "value": " Custom"
                }
            ]
        },
        {
            "label": "Contact",
            "name": "contact",
            "type": "text"
        },
        {
            "label": "Status",
            "name": "status",
            "type": "select",
            "ipOpts": [
                {
                    "label": "Active ",
                    "value": "Active "
                },
                {
                    "label": " Disabled",
                    "value": " Disabled"
                }
            ]
        }
    ]
} );

$('#publishers').dataTable( {
    "dom": "Tfrtip",
    "ajax": "php/table.publishers.php",
    "columns": [
        {
            "data": "id"
        },
        {
            "data": "publisher"
        },
        {
            "data": "integration"
        },
        {
            "data": "contact"
        },
        {
            "data": "status"
        }
    ],
    "tableTools": {
        "sRowSelect": "os",
        "aButtons": [
            { "sExtends": "editor_create", "editor": editor },
            { "sExtends": "editor_edit",   "editor": editor },
            { "sExtends": "editor_remove", "editor": editor }
        ]
    }
} );
} );

}(jQuery));

Answer 1

你不应该使用jquery ready event角度，角度有自己的初始化过程，为了使用jquery datatables你应该将它包装在指令中，就像这里： https://stackoverflow.com/a/16096071/4104866

数据表未在AngularJS视图中加载

1 个答案: