AngularJS ng-include

by wenyi

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<div ng-controller="Ctrl">
    <select ng-model="template" ng-options="t.name for t in templates" ng-change="onChange">
     <option value="">(blank)</option>
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-include src="template.url" onload='myFunction()'></div>
  </div>
  
<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
  <table id="table_user"
    data-toolbar="#toolbar"
    data-search="true"
    data-show-refresh="true"
    data-show-toggle="true"
    data-show-columns="true"
    data-sort-name="id_user"
    data-unique-id="id_user"
    data-sort-order="asc"
    data-show-export="true"
    data-pagination="true"
    data-url="https://api.myjson.com/bins/3v0kn"
    data-search="true">
        <thead>
        <tr>
            <th data-field="id_user" 
                data-sortable="true">ID</th>
            <th data-field="username" 
                data-sortable="true">User</th>
            <th data-field="desactivate" 
                data-sortable="true">Desactivate</th>      
            <th data-field="action">Action</th>
        </tr>
        </thead>
    </table>
</script>
 
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
    <p ng-class="color">Content of template2.html</p>
</script>

CSS

.red { color:red; }

JavaScript

function Ctrl($scope) {
    $scope.templates = [{
        name: 'template1.html',
        url: 'template1.html'},
    {
        name: 'template2.html',
        url: 'template2.html'}];
    $scope.template = $scope.templates[0];

    $scope.myFunction = function() {
        $scope.color = 'red';
        if ($scope.template.name === 'template1.html') {
        	$('#table_user').bootstrapTable()
        }
    }
    $scope.onChange = function() {
    		console.log('change')
    }
}