jQuery - ng-view not running JavaScript unless the script is inside the rendered html

Question

I have a <script src=""> outside my ng-view, the script itself is a jQuery function that changes the content inside the ng-view, but it is not working unless I put the <script src=""> inside the html page I am rendering. This is fairly annoying and breaking the DRY rule (Don't repeat yourself) because I have to put said script in all of my html files now, since putting it at the bottom of my index.html is not working.

Here's my index.html

<!DOCTYPE html>

<html ng-app="enitoniApp">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Stylesheets -->
    <link rel="stylesheet" href="global.css">
    <link rel="stylesheet" href="pages/css/home.css">

    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>

</head>


<body ng-controller="mainController">
    ...
        <!-- Angular -->
        <div class="wrap">
            <div ng-view></div>
           ...
</body>

<!-- Javascripts  -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="js/angular_script.js"></script>

<!--- Global Script -->
<script src="js/global.js"></script>
<!--- Content -->
<script src="js/contentinject.js"></script>

</html>

Note: "..." represents code that was too big and had to be taken out for this to be readable.

Now inside contentinject.js we have:

/** Content Injection **/

function isValid() {
    $.getJSON("/js/content.json", function (d) {
        console.log("json parsing of 'content.json' performed successfully.");
    }).fail(function (d, textStatus, error) {
        errorCall("Fatal error", "json", "Something went wrong and the site may not properly display, if the problem persists contact the website administrator.<br/><br/>Sorry about that.","<b>Couldn't parse 'content.json'</b><br/><br/>" + error)
    });
}
setTimeout(isValid, 2000)

$.getJSON("/js/content.json", function (data) {
    $(".lander .title").text(data.lTitle);
    $(".lander .subtitle").text(data.lSubtitle);
    $(".lander .text").html(data.lText.split('\n').join('<br />'));
});

Which modifies the DOM of:

home.html (What gets injected into ng-view, also our example partial)

<body>
    <div class="lander">
        <div class="w-ctrl">
            <div class="container">
                <div class="title-con">
                    <div class="title"></div>
                    <div class="subtitle"></div>
                </div>
                <div class="text-con">
                    <div class="text"></div>
                </div>
            </div>
        </div>
    </div>
</body>

Now as you can see, the script is CLEARLY at the bottom of the document, and also under angular.js, so it should load and inject the stuff into partial, but it isn't. If I put contentinject.js inside home.html, it works.

Is there any way around this?

Believe or not, but you're breaking much more rules than just DRY by doing this - that's not counting 'don't misuse jQuery with Angular'. It won't work because 'CLEARLY at the bottom' doesn't have anything to do with Angular and its app flow. You can be sure that `angular` object is available at this point but that's all. I would suggest to reformulate the question to 'how to do this properly in Angular' to get quality answers and positive feedback. — Estus Flask, Jul 10 '15 at 02:40
If you would be so kind and tell me what I have done wrong then, because I really don't know how to formulate this another way. :) — Sebastian Olsen, Jul 10 '15 at 02:48
Do view-related stuff in route controller - it is shared among views and is DRY enough. $http replaces jQuery requests and goes to separate services, bone-DRY. Data bindings replace all element content assignments. DOM modifications (if there are any left) go to directives. — Estus Flask, Jul 10 '15 at 03:07

score 0 · Answer 1 · edited May 23 '17 at 11:58

If you have assigned a certain controller to your view, than your controller will be invoked everytime your view loads. in that case, you can execute some code in your controller as soon as it is invoked..

Something like this :

<ion-nav-view ng-controller="indexController" name="other"></ion-nav-view>

and in your controller :

app.controller('indexController', function($scope) {

    /*
        Write some code directly over here
        without any function, and it will be executed every time your view loads.
        Something like this:
    */

    $scope.xyz = 1;
});

You can find more details in this answer..

jQuery - ng-view not running JavaScript unless the script is inside the rendered html

1 Answers1