-1

Estou tentando rodar a função .parallax() do framework Materialize utilizando rotas no angularjs. Eu configurei o camando document.ready para cada template pois achei que a cada chamada do template por rota o script era recarregado, porém eu estava errado. Qual seria a melhor maneira de rodar o document.ready rodando as funções que preciso toda vez que o template é carregado?

Template HTML da rota:

<!-- JS -->
<script type="text/javascript">
    var teste = function(){
        $('.parallax').parallax(); //roda somente a primeira vez
    };
</script>

<!-- Template -->
<div class="" ng-controller="homeCtrl">
...
</div>

Controller:

app.controller('homeCtrl', ['$scope', function($scope){

    //Ready
    angular.element(document).ready(function() {
        $('.parallax').parallax(); // Ocorre erro
    });

}]);

Aguardo alternativas.

1
  • Só ajustando ali, a parte do codigo "var teste = function(){" está errada. Era para ser "$(document).ready(function(){". Copiei o codigo enquanto estava fazendo testes e esqueci de arrumar. Commented 25/09/2016 às 14:23

1 Resposta 1

0

Descobri a causa do erro. Verifiquei que as tags de importação de script estavam no topo da página, e resolvi iniciar elas no body. Assim:

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8">
        <title>Teste</title>

        <!-- Materialize -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <!-- Custons -->
        <link rel="stylesheet" href="css/custom.css">

    </head>
    <body>
        <ng-view></ng-view>

        <!-- Jquery-->
        <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>

        <!-- Angular Native -->
        <script src="js/angular.min.js" type="text/javascript"></script>
        <script src="js/angular-animate.min.js" type="text/javascript"></script>
        <script src="js/angular-route.min.js" type="text/javascript"></script>

        <!-- Angular -->
        <script src="config/app.js" type="text/javascript"></script>
        <script src="config/route.js" type="text/javascript"></script>
        <script src="config/run.js" type="text/javascript"></script>
        <script src="controllers/homeCtrl.js" type="text/javascript"></script>

        <!-- Materialize -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

        <!-- Custons -->
        <script src="js/custom.js" type="text/javascript"></script>
    </body>
</html>

Assim, adicionei a inicialização document.ready dentro de meu controller, assim:

app.controller('homeCtrl', ['$scope', function($scope){

    //Ready
    $(document).ready(function(){
        $('.parallax').parallax();
    });

}]);

Sucesso!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .