Angular Controller nicht auf Link klicken klicken

Question

Ich schreibe eine Seite, die eckig hat, die auf AJAX-Anfragen reagiert und verschiedene Daten in eine Tabelle lädt. Das Winkel funktioniert wie erwartet, wenn ich die Adresse eintippe, aber wenn ich einen Link (<a href="/product/search">link</a>) verwende, um auf die Seite zu gelangen, kann der Controller nicht geladen werden (aber der HTML-Code wird angezeigt). Es gibt keine Seitenfehler in der Konsole außer einer Ressource, die nicht für ein Bild geladen wurde, da die URL nicht vom Angular geladen wird. Hier ist mein 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> 

der Link, meine auf die Seite leitet verwendet ein href von „/ products/search“, die die richtige Weg ist.

Jede Hilfe würde sehr geschätzt werden!

Answer 1

Stellt sich nach einigem Lesen Turbulenzen wurde das Problem verursacht. Turbolinks erlaubt kein vollständiges Neuladen der Seite, daher wurde angular nie vollständig bootstrapped. Hier ist eine gründlichere Beitrag zum Thema: Using angularjs with turbolinks