AngularJS：在出现部分视图之前触发了$ viewContentLoaded

Question

对于局部视图，我想做一些我通常会使用的JavaScript东西$(document).ready(function() {...})，例如将venet侦听器绑定到元素。我知道这不适用于AngularJS和部分视图加载到“根”视图。

因此，我向监听$viewContentLoaded事件的控制器添加了一个监听器。侦听器的函数被调用，因此触发了该事件，但是在我看来，它似乎是在呈现部分视图之前。在侦听器的函数中设置断点并使用firebug对其进行调试时，我都看不到元素，在函数中的jquery选择也找不到局部视图的元素。

这是控制器的外观：

angular.module('docinvoiceClientAngularjsApp')
  .controller('LoginController', function ($scope, $rootScope) {

$scope.$on('$viewContentLoaded', function(event) {
  console.log("content loaded");
  console.log($("#loginForm"));   // breakpoint here 
});

[...]

我想我做错了，因为如果这是一个常见的错误，则必须在stackoverflow上发布更多帖子。

当我使用 ui-router 和 ui-view时 ，我将为您提供路由文件的摘录：

angular
  .module('docinvoiceClientAngularjsApp', [
    'ui.router',
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngMessages',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
 .config(function ($routeProvider, $stateProvider) {
    $stateProvider
    .state('login', {
        url: '/',
        templateUrl: 'components/login/loginView.html',
        controller: 'LoginController'
    })
    .run(['$state', function ($state) {
        $state.transitionTo('login');
    }])

 [...]

任何帮助表示赞赏。谢谢和亲切的问候

更新1： 我将错误归结为以下用例：loginView.html如下所示：

<div id="loginContainer" style="width: 300px">
  <form id="loginForm" ng-submit="login(credentials)" ng-if="session.token == undefined">

[...]

一旦ng-if从div标签中删除，它就会按预期工作。呈现DOM后触发事件，因此jQuery找到了元素。如果将ng- ifd附加到div标记，则行为将首先描述。

更新2： 如我所愿，我添加了一个工作演示，该演示显示了添加ng- if指令时的不同行为。谁能为我指出正确的方向？不要像这样使用登录表单，因为还有更多用例，在这些用例中，我想基于某种表达式删除视图的某些部分，并在部分视图准备好后做一些JavaScript事情。

您可以在此处找到有效的演示：演示

Answer 1

这与角度摘要循环有关，与角度如何在引擎盖下工作，数据绑定等有关。有很多很棒的教程对此进行了解释。

要解决您的问题，请使用$ timeout，它将使代码在下一个周期执行（如果已解析ng-if）：

app.controller('LoginController', function ($scope, $timeout) {
    $scope.$on('$viewContentLoaded', function(event) {
      $timeout(function() {
        $scope.formData.value = document.getElementById("loginForm").id;
      },0);
    });
});

在此处修复了演示：http :
//codepen.io/anon/pen/JoYPdv