Question

我有一个使用AngularJS模板指令的html页面，如下所示：

<?php
$db =  new PDO("sqlite:c:/sqlite/games.db");  
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$query_game = $db->prepare("select distinct games as di from outdoor_games;");
$query_game->execute();
$data = $query_game->fetchAll(); 
?>
<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   
 </head>
 <body>
<form action="<?php $_SERVER['PHP_SELF'];?>"  method="post">
    <TABLE id="STable" width="350px" border="1">
            <tr>    <th bgcolor="WHITESMOKE">Game Id </th>  </tr>
            <TR>    <td><select name= "Game_id[]" class='Game'/> <option value="">Games</option>
                        <?php foreach ($data as $row){echo '<option value="' . $row['di'] . '">' . $row ['di'] . '</option>';} ?>
                    </select></td>
            </TR>
    </TABLE></br> 
    <label>No. of games <input type= "text" id="s_cnt" name= "d_Count"></label>
    <button type="button" class='loadgames' >Load Games</button>
    <input type="submit" name ="add_SP" value ="Add Student Info" style="float: right;" /> </br> </br>
    <input type="submit" name ="exit" value ="EXIT"  />
</form>
<script>  

    $('.Game').on('click', function()
    {
        var selected = $(this).val();
        $('.Game').not(this).find('option[value="'+selected+'"]').prop('disabled', true);

    }); 
   $(".loadgames").on('click',function()
    {
        var num = $("#s_cnt").val();
        $("#STable tr").slice(2).remove();
        for (var i = 2; i <= num; i++) 
        {
                var data = "<tr><td><select name='Game_id[]' class='Game'><option value='null'>Games</option><?php foreach ($data as $row){echo "<option value=".$row['di'] . ">" .$row['di']. "</option>";}?></select></td></tr>";
                $("#STable").append(data);
        }
        });  
   </script>
    </body>
    </html>

我的指示如下：

<div class="row">
        <div class="col-sm-12">
            <div logo></div>
            <div login-card></div>
            <div info></div>
        </div>
    </div>

有一个名为loginController的控制器，使用ngRoutes在路由中指定，如下所示：

myApp.directive('logo', function(){
    // Runs during compile
    return {
        templateUrl: "components/logo.html"
    };
});

myApp.directive('loginCard', function(){
    // Runs during compile
    return {
        templateUrl: "components/login-card.html"
    };
});

myApp.directive('info', function(){
    // Runs during compile
    return {
        templateUrl: "components/info.html"
    };
});

当我的页面加载完毕后，我希望它能够直接滚动到较小设备上的登录卡。为此我把这个代码放在我的loginController中：

when("/login", {
        templateUrl: 'login/login.html?version=3',
        controller: 'loginController'
    }).

而且，我的login-card.html看起来像这样：

$document.ready( function () {
        if ( $(window).width() < 768 ) {
            $('html,body').animate({ scrollTop: $(".page-top").offset().top}, 'slow');
        }
    })

问题是$ document.ready函数在加载partial之前触发，因此无法找到名为page-top的指定类的div。

什么是让Angular等到加载模板的最佳方法，所以它可以滚动到它？

这可以通过使用promises实现，我之前从未使用过它们吗？

Answer 1

如果您想使用promises，请参阅此http://jsfiddle.net/Zenuka/pHEf9/21/ 但我认为另一种解决方案是你可以使用$timeout解决这个问题

$timeout( function(){
            $document.ready( function () {
        if ( $(window).width() < 768 ) {
            $('html,body').animate({ scrollTop: $(".page-top").offset().top}, 'slow');
        }
    })
        }, 2000 );

现在你的功能延迟2秒。您可以根据自己的要求更改时间。

Answer 2

我认为在指令的link函数中编写代码会这样做，因为在链接方法中，登录html在DOM中可用

myApp.directive('loginCard', function () {
        return {
            templateUrl: "login-card.html",
            link: function (scope, element, attrs) {
                //Your code to adjust view
                console.log(document.getElementsByClassName('page-top'));
            }
        }
    });

在加载所有AngularJS模板指令后运行javascript代码

2 个答案: