Document.ready using routes in Angularjs

Asked

Viewed 496 times

-1

I’m trying to run the . Parallax() function of the Materialize framework using routes in Angularjs. I set up Document.ready for each template because I thought that every call of the template per route the script was reloaded, but I was wrong. What would be the best way to run Document.ready running the functions I need every time the template loads?

Route HTML template:

<!-- 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
    });

}]);

I await alternatives.

jquery angularjs angular-routes

  • Just by setting there, the part of the code "var test = Function(){" is wrong. It was to be "$(Document). ready(Function(){". I copied the code while I was running tests and forgot to fix it.

1 answer

0

I found the cause of the error. I checked that the script import tags were at the top of the page, and decided to start them on the body. So:

<!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>

So, I added the Document.ready boot inside my controller, so:

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

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

}]);

Success!

Browser other questions tagged jquery angularjs angular-routes

You are not signed in. Login or sign up in order to post.