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

对于部分视图，我想做一些我通常会做的 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 上必须有更多的帖子。

正如我正在使用的用户界面路由器 and 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-if附加到 div 标签，行为如首先描述的。

更新2：正如所承诺的，我添加了一个工作演示，该演示显示了添加时的不同行为ng-if指示。有人能指出我正确的方向吗？不要坚持这样的登录表单，因为还有很多用例，我想根据某些表达式删除视图的某些部分，并在部分视图准备好后执行一些 JavaScript 操作。

您可以在这里找到工作演示：Demo http://codepen.io/anon/pen/bNdYbr

这与 Angular 摘要周期有关，它是关于 Angular 在底层如何工作、数据绑定等。有很好的教程解释了这一点。

为了解决你的问题，使用 $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 http://codepen.io/anon/pen/JoYPdv

但我强烈建议您使用指令进行任何 DOM 操作，控制器不适合这样做。 以下是如何执行此操作的示例：AngularJS 中的简单 dom 操作 - 单击按钮，然后将焦点设置到输入元素 https://stackoverflow.com/questions/15518772/easy-dom-manipulation-in-angularjs-click-a-button-then-set-focus-to-an-input#answer-15529412