对于局部视图,我想做一些我通常会使用的JavaScript东西$(document).ready(function() {...}),例如将venet侦听器绑定到元素。我知道这不适用于AngularJS和部分视图加载到“根”视图。
$(document).ready(function() {...})
因此,我向监听$viewContentLoaded事件的控制器添加了一个监听器。侦听器的函数被调用,因此触发了该事件,但是在我看来,它似乎是在呈现部分视图之前。在侦听器的函数中设置断点并使用firebug对其进行调试时,我都看不到元素,在函数中的jquery选择也找不到局部视图的元素。
$viewContentLoaded
这是控制器的外观:
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标记,则行为将首先描述。
ng-if
ng- if
更新2: 如我所愿,我添加了一个工作演示,该演示显示了添加ng- if指令时的不同行为。谁能为我指出正确的方向?不要像这样使用登录表单,因为还有更多用例,在这些用例中,我想基于某种表达式删除视图的某些部分,并在部分视图准备好后做一些JavaScript事情。
您可以在此处找到有效的演示:演示
这与角度摘要循环有关,与角度如何在引擎盖下工作,数据绑定等有关。有很多很棒的教程对此进行了解释。
要解决您的问题,请使用$ 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