Açısal denetleyici bağlantıya yüklenmiyor

Question

ajax isteklerine yanıt veren ve bir tabloya çeşitli veriler yükleyen bir sayfa yazıyorum. Köşeli, adresi yazarken beklendiği gibi çalışır, ancak sayfaya ulaşmak için bir bağlantı (<a href="/product/search">link</a>) kullanırsam, denetleyici yüklenmez (ancak html görünür). Konsolda, görüntü için yüklü olmayan bir kaynak dışında, URL'nin açısal tarafından yüklenmediğinden sayfa hatası yoktur.

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

sayfaya gözlerimi yönlendiriyor bağlantı bir href kullanır "/ ürünlere/arama", doğru yoldur: İşte benim kodudur.

Herhangi bir yardım en çok memnuniyetle karşılanacaktır!

Answer 1

Bazı okuma turbolilerini soruna neden olduktan sonra söner. Turbolinks tam sayfa yeniden yüklemeye izin vermez, bu nedenle açısal hiçbir zaman tam olarak önyüklenmez. Konuyla ilgili daha kapsamlı bir gönderi: Using angularjs with turbolinks