2015-12-26 4 views
0

Я пытаюсь вызвать api по щелчку ссылки и показать данные в новом представлении, но я не вижу никаких данных, ни ошибок на консоли. Я пытался использовать Log также, но это также не дает мне никаких подсказок. Вот мой код в View: API-вызов по щелчку ссылки в угловом JS

 <tr class="well-new" ng-repeat="product in gettempdata.FoodItems| orderBy:'Id' | filter:search""> 
      <td class="tdCenter" > 
       {{product.Id}} 
      </td> 
      <td class="tdCenter"> 
       <img ng-src="{{product.ImageUrl}}" alt="{{product.Name}}" /> 

      </td> 

      <td> 
       <a href="#Name" ng-click="GetItemDetails(product.Id)"><b>{{product.Name}}</b></a><br /> 
       {{product.Category}} 
      </td> 
     </tr> 
    </table> 

Я пытаюсь вызвать GetItemDetails (Id). код контроллера:

 myStore.controller("Home", function ($scope, StoreService, $log, $window) { 
var onComplete = function (data) { 
     $scope.gettempdata = data; 
    } 
    var onError = function (reason) { 
     alert(reason.errorcode); 
    } 
$scope.GetItemDetails = function (Id) { 
     $log.info("wait for 5 secs"); 
     StoreService.getItemDetails(Id).then(onComplete, onError); 
     $log.info("done"); 
    } 
}); 

App.js код:

var myStore = angular.module('groceries', ['ngRoute']) 
.config(function ($routeProvider) { 
    $routeProvider. 
     when("/Home", { 
      templateUrl: "/Index.html", 
      controller: "Home" 
     }). 

     when("/Name", { 
      templateUrl: "Store/Product.html", 
      controller: "Home" 
     }). 

    otherwise 
    ({ 
     redirectTo: "/Home" 
    }) 

}); 

Вид дома:

<html ng-app="groceries"> 
<head> 
<script> ALL scripts</scripts> 
<title></title> 
</head> 
<body> 

    <!-- 
     bootstrap fluid layout 
     (12 columns: span 10, offset 1 centers the content and adds a margin on each side) 
    --> 
    <div class="container-fluid"> 
     <div class="row-fluid"> 
      <div class="span10 offset1"> 
       <h1 class="well"> 

        <b>Store </b> 
       </h1> 
       <!-- <a href="#Index.html">Click here to navigate to Store</a>--> 
       <div ng-view ></div> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 
+0

глядя на код, то кажется, что gettempdata пуст, когда страница загружена, и нг-повтора не будет ничего генерировать, так что вы не можете вызвать функцию на якоре. : -/ – toskv

+0

Пожалуйста, проверьте регистр переменных, .id вместо .Id –

+0

@toskv yes thats true, gettempdata пуст при загрузке страницы. – Iquery

ответ

1

Якорный тег имеет приоритет для href над ng-click и поэтому не работает. я доработан мой код, как показано ниже:

<td > 
<a ng-href="" ng-click="GetItemDetails(product.Id,window.location.href='/Name')"><b>{{product.Name}}</b></a><br /></td> 
2

Пожалуйста, проверьте случай переменных, .id вместо .id

{{product.id}} {{product.imageUrl}} {{product.name}} {{product.category}}

+0

как может быть api call и routing сделано одним щелчком мыши – Iquery

Смежные вопросы