Angular controller not loading on link click

Question

I'm writing a page that has angular in it that responds to ajax requests and loads various data into a table. The angular works as expected when I type in the address, but if I use a link ( <a href="/product/search">link</a> ) to get to the page, the controller fails to load (but the html shows up). There are no page errors in the console except a resource not loaded for an image because the url is not being loaded by the angular. Here is my code:

    <h1 style="text-align: center;">Product Search</h1>
<input type="text" class="form-control" placeholder="Search (Ex. ea-004, Christmas)..." id="search" style="margin-left: auto; margin-right: auto; margin-bottom: 15px;">
<div ng-app="search_results"  style="text-align: center; margin-left: 0px; margin-right: 0px;">
<div ng-controller="search_results_ctl" style="text-align: center; margin-left: 0px; margin-right: 0px;">

    product{{JSON.stringify(product)}}
<style>
    .product:hover{
        background-color: #DDDDDD;
        cursor: pointer;
        border:0px solid grey;
        border-radius: 5px;
    }

    .product-selector:hover {
        color: black;
    }
</style>




<script>

    var app = angular.module("search_results", ['angularUtils.directives.dirPagination']);

    app.controller("search_results_ctl", ['$scope', function($scope){
        console.log("Angular loaded...");
        $scope.results = "";

        $('#search').keypress(function(ev){
            if(ev.which != 13){//do not add enter to search text, just submit query again
                s_term = $('#search').val() + String.fromCharCode(ev.which);//append last character typed
            }else{
                s_term = $('#search').val();
            }


            $.ajax({
             url: "/query",
             data: {s_term: s_term},
             success: function(data){
                //console.log("products: " + data);
                $scope.products = JSON.parse(data);
                $scope.$apply();
             }
            });
        });



    }]);    

</script>
    <span ng-if="products != null">
    <div style="width: 80%; margin: auto !important;
    " dir-paginate="product in products | itemsPerPage: 10" class="row product">
        <a href="/orders/new?product_id={{product.id}}" class="product-selector">
        <div class="col-md-3 col-sm-3">{{product.title}}</div><div class="col-md-6 col-sm-6">{{product.description}}</div><div class="col-md-3 col-sm-3" style="text-align: center"><img src='{{product.image}}' width="50px" height="50px" style="margin-top: auto; margin-bottom: auto;"></div></a>
    </div>
    </span>
    <span ng-if="products == null" >
        <div style="background-color: #DDDDDD; border: 0px solid grey; border-radius: 5px;">
        <h3 style="text-align: center;">Creating an Order</h3>
        <p><strong>To start</strong>, type in the product code from the website or a key word like "christmas" or "sports". Click the product you would like to order, and it will take you to the order page.</p>
        </div>
    </span>

<dir-pagination-controls></dir-pagination-controls>

</div>
</div>

the link that is directing my to the page uses an href of "/products/search", which is the correct route.

Any help would be most appreciated!

I assume since you don't include a # in your url you have configured Angular to use HTML5... Is your controller being specified in your Angular routes file? You should provide some additional information so we can give an answer. — aallord, Apr 11 '16 at 17:51
I'm not using an angular routes file. I'm just using angular for some really simple html rendering. Turns out turbolinks was the culprit because it wasn't allowing angular to fully bootstrap. — Silvertail, Apr 11 '16 at 17:57

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

Turns out after some further reading turbolinks was causing the problem. Turbolinks does not allow a full page reload, so angular never got fully bootstrapped. Here is a more thorough post on the issue: Using angularjs with turbolinks

edited May 23 '17 at 12:31

Community

1
1

answered Apr 11 '16 at 17:55

Silvertail

169
1
13

BTW, in case someone else has this problem and is too lazy to read through the other post, the solution is just to add `data-no-turbolink` to any hrefs that lead to the page with angular :) – Silvertail Apr 11 '16 at 17:58

Angular controller not loading on link click

1 Answers1