为什么角度包括不加载？答案

【问题标题】：Why are angular includes not loading?为什么角度包括不加载？
【发布时间】：2016-06-21 14:31:28
【问题描述】：

我在下面列出的 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>

【问题讨论】：

您是否在服务器上运行您的 Angular 应用程序？
控制台有错误信息吗？哪一行是您的代码未完成加载的地方？
应用在服务器上运行，没有控制台错误。
我不知道你指的是什么。这与加密无关。
你明白密码不应该被加密保存，加密和散列的区别吗？

标签： javascript angularjs angularjs-ng-include

【解决方案1】：

尝试使用，

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

来自角度文档：每次请求 ngInclude 内容时发出。

【讨论】：

你能生成plunk还是fiddle