javascript - ng-if 内的 Angular js

Question

我知道这不是代码的结构方式，但我能力有限。我试图在 Angular ng-if 部分中包含一个数据表。当我去掉 ng-if 语句时，js 运行正常。我正在寻找可行的方法来解决这个问题。我尝试将 js 移到 ng-if 之外，但数据表不起作用。任何正确方向的提示都会有所帮助。谢谢。

<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>

Answer 1

ng-if 将创建一个与 Controller 作用域不同的子作用域。尝试使用 ng-show 代替

<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>