小编典典

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

angularjs

对于局部视图,我想做一些我通常会使用的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-routerui-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事情。

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


阅读 432

收藏
2020-07-04

共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

2020-07-04