Per una vista parziale, desidero eseguire alcune operazioni JavaScript che di solito farei con $(document).ready(function() {...})
, ad es. legare gli ascoltatori al veneto agli elementi. So che questo non funziona per AngularJS e le viste parziali caricate nella vista "root".
Così ho aggiunto un ascoltatore al controller che ascolta l'evento $viewContentLoaded
. La funzione del listener viene invocata, quindi l'evento viene generato ma mi sembra che sia prima che venga visualizzata la vista parziale. Né vedo gli elementi quando imposto un breakpoint nella funzione dell'ascoltatore e lo faccio il debug con firebug, né la selezione jquery all'interno della funzione trova gli elementi della vista parziale.
Questo è ciò che il controller appare come:
angular.module('docinvoiceClientAngularjsApp')
.controller('LoginController', function ($scope, $rootScope) {
$scope.$on('$viewContentLoaded', function(event) {
console.log("content loaded");
console.log($("#loginForm")); // breakpoint here
});
[...]
Credo che sto facendo qualcosa di sbagliato come ci doveva essere più messaggi su StackOverflow se questo è un bug comune.
Come sto utilizzando ui-router e ui-view, io vi darà un estratto del file di routing:
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');
}])
[...]
Ogni aiuto è apprezzato. Grazie e cordiali saluti
UPDATE 1: ho messo a nudo l'errore verso il seguente caso d'uso: Il loginView.html è simile al seguente:
<div id="loginContainer" style="width: 300px">
<form id="loginForm" ng-submit="login(credentials)" ng-if="session.token == undefined">
[...]
Appena posso rimuovere la ng-if
dal tag div , funziona come previsto. L'evento viene attivato dopo il rendering del DOM, quindi jQuery trova l'elemento. Se lo ng-if
è collegato al tag div, il comportamento è come descritto in precedenza.
UPDATE 2: Come promesso, ho aggiunto una demo funzionante che mostra il diverso comportamento quando si aggiunge una direttiva ng-if
. Qualcuno può indicarmi la giusta direzione? Non attenersi al modulo di accesso in quanto tale, poiché ci sono molti altri casi d'uso in cui voglio rimuovere alcune parti di una vista basate su alcune espressioni e fare alcuni elementi JavaScript dopo che la vista parziale è pronta.
È possibile trovare la demo funzionante qui: Demo
È possibile creare una direttiva per voi dom roba. – dfsq
Ho creato una [demo di lavoro] (http://codepen.io/anon/pen/gbpmQy) in base al codice e funziona correttamente. La prossima volta, prova a fornire la demo da solo. – hon2a
Mille grazie per la demo di lavoro. Ho aggiornato la descrizione come ho scoperto che il ng-if causa il diverso comportamento. Hai un'idea del perché si comporta diversamente? L'espressione viene valutata su "true" come posso vedere il form di login, solo un momento troppo tardi;) – Florian