AngularJS:出现局部视图之前$ viewContentLoaded解雇 [英] AngularJS: $viewContentLoaded fired before partial view appears
问题描述
有关我想要做一些JavaScript的东西,我通常会使用 $(文件)。就绪做局部视图(函数(){...})
,例如绑定VENET听众元素。我知道,这并不加载到根视图AngularJS和部分意见工作。
For a partial view I want to do some JavaScript stuff that I usually would do with $(document).ready(function() {...})
, e.g. bind venet listeners to elements. I know that this doesn't work for AngularJS and partial views loaded into the "root" view.
因此,我添加了一个监听器,监听到 $ viewContentLoaded
事件的控制器。听者的函数被调用,因此事件被触发,但在我看来,就好像它是局部视图渲染之前。我也不看的元素,当我设置了听众的功能,并与萤火虫调试它一个断点,也没有在函数内部jQuery的选择找到局部视图的元素。
Thus I added a listener to the controller that listens to the $viewContentLoaded
event. The listener's function is invoked, so the event is fired but it seems to me as if it is before the partial view is rendered. Neither do I see the elements when I set a breakpoint in the listener's function and debug it with firebug, nor does the jquery selection within the function find the partial view's elements.
这是控制器的样子:
angular.module('docinvoiceClientAngularjsApp')
.controller('LoginController', function ($scope, $rootScope) {
$scope.$on('$viewContentLoaded', function(event) {
console.log("content loaded");
console.log($("#loginForm")); // breakpoint here
});
[...]
我猜,我做错了什么,因为必须是计算器上的更多内容,如果这是一个常见的错误。
I guess that I am doing something wrong as there had to be more posts on stackoverflow if this is a common bug.
由于我使用的 UI路由器和用户界面视图后,我会给你的路由文件的摘录:
As I am using ui-router and ui-view, I will give you an excerpt of the routing file:
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');
}])
[...]
任何帮助是AP preciated。感谢和亲切的问候
Any help is appreciated. Thanks and kind regards
更新1:我扯下了错误降低到以下用例:本loginView.html如下所示:
UPDATE 1: I stripped the error down to the following usecase: The loginView.html looks like the following:
<div id="loginContainer" style="width: 300px">
<form id="loginForm" ng-submit="login(credentials)" ng-if="session.token == undefined">
[...]
当我删除 NG-如果
从div标签,它按预期工作。该事件被触发DOM之后被渲染,从而jQuery的发现的元素。如果 NG-IF
连接到div标签,其行为首先描述。
As soon as I remove the ng-if
from the div tag, it works as expected. The event is triggered after the DOM is rendered, thus jQuery finds the element. If the ng-if
is attached to the div tag, the behaviour is as first described.
更新2:作为承诺我加了工作演示,显示添加时,不同的行为NG-如果
指令。任何人都可以点我朝着正确的方向?不要固守登录表单这样,因为还有更多的使用情况下,我想删除基于一些前pression视图的某些部分,并做一些JavaScript的东西后,局部视图已准备就绪。
UPDATE 2: As promised I added a working demo that shows the different behaviour when adding a ng-if
directive. Can anyone point me the right direction? Don't stick to the login form as such, as there are many more use cases where I want to remove certain parts of a view based on some expression and do some JavaScript stuff after the partial view is ready.
您可以找到工作演示在这里:演示
You can find the working demo here: Demo
推荐答案
这是关系到角消化周期,它是关于引擎盖下是如何工作的角度,数据绑定等方面有很大的教程解释这一点。
This is related to angular digest cycle, it's about how angular works underneath the hood, data binding etc. There are great tutorials explaining this.
要解决问题,使用$超时,就会使code在下一个周期内执行,whem的NG-如果已经解析:
To solve your problem, use $timeout, it will make the code execute on the next cycle, whem the ng-if was already parsed:
app.controller('LoginController', function ($scope, $timeout) {
$scope.$on('$viewContentLoaded', function(event) {
$timeout(function() {
$scope.formData.value = document.getElementById("loginForm").id;
},0);
});
});
在这里固定的演示: HTTP://$c$cpen.io/anon/pen/JoYPdv
但我强烈建议你使用的指令做任何DOM操作,控制器不是那个。
这里是如何做到这一点的例子:
<一href=\"http://stackoverflow.com/questions/15518772/easy-dom-manipulation-in-angularjs-click-a-button-then-set-focus-to-an-input#answer-15529412\">Easy DOM操作在AngularJS - 点击一个按钮,然后将焦点设置到一个输入元素
But I strongly advise you to use directives do any DOM manipulation, the controller isn't for that. Here is a example of how do this: Easy dom manipulation in AngularJS - click a button, then set focus to an input element
这篇关于AngularJS:出现局部视图之前$ viewContentLoaded解雇的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!