角控制器未加载链接单击

Question

我正在写一个有角的页面，该页面响应ajax请求并将各种数据加载到表中。 当我键入地址时，角度按预期的方式工作，但是如果我使用链接（ <a href="/product/search">link</a> ）进入页面，则控制器将无法加载（但html出现）。 控制台中没有页面错误，除了没有为图像加载资源之外，这是因为角度未加载url。 这是我的代码：

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

将我定向到页面的链接使用的href为“ / products / search”，这是正确的路线。

非常感激任何的帮助！

Answer 1

在进一步阅读turbolinks导致此问题后发现。 Turbolink不允许重新加载整个页面，因此angular永远不会被完全引导。 这是有关此问题的更详尽的文章： 将angularjs与turbolinks一起使用