Question

我在为视图单击链接时没有加载数据表。如何将它包装在一个指令中，以便在调用视图时显示数据？

<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 routing = angular.module('RT.Routing', []);
routing.controller('testController', function ($scope) {});
routing.controller('ListController', function ($scope) {});
routing.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>

从上面HTML中的标题调用的JS代码

(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));

在AngularJS加载的指令中包装Datatable

0 个答案: