为什么角度包括不加载?

时间:2016-06-21 14:31:28

标签: javascript angularjs angularjs-ng-include

我在下面列出的HTML视图中有两个包含。我在操作某些元素之前等待视图加载但是因为包含尚未完成加载而失败。我在调试时使用控制台检查元素是否存在。在我的控制器中:

wtApp.controller('createAccountController', function ($scope) {
    resetNavbar();
    $("a[href$='create-account']").css({ color: navbarSelectedColor });
    $scope.$on('$viewContentLoaded', function () {
        getCountries();
        setupAccountsForm();
        var form = $("#form-accounts");
        if (form.length) {
            form.get(0).reset();
        }
    });
});


<!DOCTYPE html>
<html>
    <head>
        <title>Writer's Tryst</title>
        <link href='css/accounts.css' rel='stylesheet' type='text/css' />
    </head>
    <body data-ng-app="">
        <div>
            <form id="form-accounts" class="form-horizontal well center-form-small">
                <h1>Create Account</h1>
                <div class="capatcha">
                    <div id="recaptcha-elements" style="display: inline-block" data-sitekey=""></div>
                </div>        
                <div id="oauth-login" class="form-group row text-center">
                    <p>
                        <button id="facebook-login" class="btn btn-custom-primary" formnovalidate>Login with Facebook</button>
                        <button id="google-login" class="btn btn-custom-primary" formnovalidate>Login with Google</button><br/>
                    </p>
                    <p class="text-center">
                        <button class="btn btn-custom-success" formnovalidate>- OR ENTER -</button>
                    </p>
                </div>
                <div id="passwords">
                    <div class="form-group row">
                        <label for="pwd" class="col-sm-2 form-control-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" required id="pwd" name="pwd" placeholder="Password - 6 characters minimum (will be encrypted)" />
                            <button id="show-pwd" class="btn btn-custom-primary" formnovalidate tabindex="-1">show</button>
                         </div> 
                    </div>
                    <div class="form-group row">
                        <label for="confirm-pwd" class="col-sm-2 form-control-label">Confirm Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" required id="confirm-pwd" placeholder="Confirm password" />
                            <button id="show-confirm-pwd" class="btn btn-custom-primary" tabindex="-1">show</button>
                        </div>
                    </div>
                </div>
                <div data-ng-include="'pages/snippets/work-type.html'"></div>
                <div data-ng-include="'pages/snippets/account-info.html'"></div>
                <button type="submit" id="submit" class="btn btn-custom-warrning btn-block">Send Verification Email</button>
                <input  type="hidden" id="subject" name="subject" />
                <input  type="hidden" id="msg" name="msg"  />
                <input  type="hidden" id="userid" name="userid"/>
            </form>
            <form id="form-verify" class="form-horizontal well center-form-small">
                <div id="verify">
                    <div class="form-group">
                        <input id="ver-email-msg" name="ver-email-msg" readonly="true"  />
                    </div>
                    <div class="form-group center-div">
                        <label for="ver-code">Verification Code</label>
                        <input id="ver-code" name="ver-code" required autofocus="true" placeholder="Paste verification code" />
                    </div>
                    <div class="form-group">
                        <input id="code" name="code" type="hidden" />
                        <button id="but-register" name="but-register" class="btn btn-custom-success btn-block">Create Account</button>
                    </div>
                </div>
                <input id="account-id" name="account-id" type="hidden" />
            </form>
        </div>
        <script src="js/recaptcha.js"></script>
        <script src="js/accounts.js"></script>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

尝试使用,

$rootScope.$on('$includeContentLoaded',function(event,url){
  if (url == 'YourDesiredPath') {
    // do something
  }
}); 

来自angular docs : 每次请求ngInclude内容时都会发出。