document.ready using non-angular paths

Question

document.ready using non-angular paths

Navigation

#1 by (0 votes)

1

I'm trying to run the .parallax () function of the Materialize framework using angular paths. I configured the document.ready layer for each template because I found that with each template call per route the script was reloaded, however I was wrong. What would be the best way to run document.ready by running the functions I need every time the template is loaded?

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 look forward to alternatives.

jquery angularjs angular-routes

asked by anonymous 25.09.2016 / 16:18

1 answer

Is it possible to use Node.js as a server for PHP? Insert data from a JSON into a Sqlite database with AngularJS

score 0 · Answer 1

I discovered the cause of the error. I noticed that the script import tags were at the top of the page, and I decided to start them in 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--><scriptsrc="js/custom.js" type="text/javascript"></script>
    </body>
</html>

So I added the initialization document.ready inside my controller, like this:

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

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

}]);

Success!