AngularJS ng-include

by wenyi

HTML

<script src="https://raw.githubusercontent.com/wenzhixin/bootstrap-table/develop/dist/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/wenzhixin/bootstrap-table/develop/dist/bootstrap-table.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div ng-controller="Ctrl">
    <select ng-model="template" ng-options="t.name for t in templates" ng-change="change">
     <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-toggle="table"
    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="http://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" data-formatter="actionFormatter" data-events="actionEvents">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';
    }
    $scope.change = function() {
    		console.log('change')
    }
}