jquery - AngularJS:在部分 View 出现之前触发 $viewContentLoaded

Question

对于部分 View ，我想做一些通常使用 $(document).ready(function() {...}) 做的 JavaScript 操作，例如将 venet 监听器绑定(bind)到元素。我知道这对于 AngularJS 和加载到“根” View 中的部分 View 不起作用。

因此，我向 Controller 添加了一个监听器，用于监听 $viewContentLoaded 事件。监听器的函数被调用，因此事件被触发，但在我看来，好像是在渲染部分 View 之前。当我在监听器函数中设置断点并使用 firebug 对其进行调试时，我也看不到这些元素，函数中的 jquery 选择也没有找到部分 View 的元素。

这就是 Controller 的样子:

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">

[...]

一旦我从 div 标记中删除 ng-if，它就会按预期工作。该事件在 DOM 渲染后触发，从而 jQuery 找到该元素。如果 ng-if 附加到 div 标记，则行为如首先描述的那样。

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

您可以在这里找到工作演示:Demo

Answer 1

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

要解决您的问题，请使用 $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

但我强烈建议您使用指令进行任何 DOM 操作， Controller 不适合这样做。以下是如何执行此操作的示例: Easy dom manipulation in AngularJS - click a button, then set focus to an input element