Angular js inside of an ng-if

Question

I know this is not how the code should be structured but I am limited. I am trying to include a datatable inside angular ng-if section. When I take off the ng-if statement the js runs fine. I am looking for ways around this where it works. I have tried to move the js outside of the ng-if, but then the datatable doesn't work. Any hint in the right direction would be helpful. Thanks.

<div ng-if="test">
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <!-- Results table -->
    <table id="example2" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Account</th>
                <th>Created On</th>
                <th>Table ID</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-click="displayStatementToggle()">
                <th>123</th>
                <th>2011-04-28 13:32:07</th>
                <th>Mortgage</th>
                <th>Edit</th>
            </tr>
            <tr ng-click="displayStatementToggle()">
                <th>123</th>
                <th>2016-04-18 14:36:07</th>
                <th>Monthly</th>
                <th>Edit</th>
            </tr>
        </tbody>
    </table>
    <script>
        $(document).ready(function() {
            $('#example2').DataTable();
        });
    </script>
</div>

score 2 · Accepted Answer · answered Jul 07 '17 at 15:38

ng-if will create a child scope which is different from your controller scope. Try to use ng-show instead

<div ng-show="test">
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <!-- Results table -->
    <table id="example2" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Account</th>
                <th>Created On</th>
                <th>Table ID</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-click="displayStatementToggle()">
                <th>123</th>
                <th>2011-04-28 13:32:07</th>
                <th>Mortgage</th>
                <th>Edit</th>
            </tr>
            <tr ng-click="displayStatementToggle()">
                <th>123</th>
                <th>2016-04-18 14:36:07</th>
                <th>Monthly</th>
                <th>Edit</th>
            </tr>
        </tbody>
    </table>
    <script>
        $(document).ready(function() {
            $('#example2').DataTable();
        });
    </script>
</div>

score 1 · Answer 2 · answered Jul 07 '17 at 15:50

ng-if has its own scope, so the functions you are calling are undefined inside of it.

ng-show is a possible solution, but has it's own caveats.

Plase, take a look at this answer, which explains the importance of using the dot in your directives. Even if you choose to use ng-show, I would recommend that you refactor your controller and view to avoid further complications down the road.

If you are new to angular, don't hesitate to read John Papa's styleguide, which covers that situation and many others.

Angular js inside of an ng-if

2 Answers2