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>

Vivz · Accepted Answer · 2017-07-07 15:38:20Z

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>

tiagodws · Accepted Answer · 2017-07-07 15:50:26Z

1

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.

answered Jul 7, 2017 at 15:50

tiagodws

1,39514 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular js inside of an ng-if

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related