Having trouble with Ng-View not displaying the output correctly. When attempting to route from one page to another, I keep encountering the error message:
"RangeError: Maximum call stack size exceeded"
Please review the following code and provide suggestions on how to resolve this issue:
'use strict';
var app = angular.module('Sab', ['ui.filters','ui','ngRoute'])
.config(["$routeProvider", function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'index.html',
controller: 'menuCtrl'
}).
when('/Deals/:offer_name', {
templateUrl: 'Deals.html',
controller: 'abCtrl'
}).
when('/D', {
templateUrl: 'D.html',
}).
otherwise({
redirectTo: '/home'
});
}])
.controller('menuCtrl', function($scope,$http) {
$http.get("http://tools.vcommission.com/api/coupons.php?apikey=e159f64e3dd49fddc3bb21dcda70f10c6670ea91aac30c7cb1d4ed37b20c45b8").then(function (response) {
$scope.myData = response.data;
$scope.offerName = ''; //set initially
$scope.selectedIndex = -1;
$scope.filteredOffers = [];
});
$scope.showData = function(offer_name, index) {
$scope.offerName = offer_name;
$scope.filteredOffers = $scope.myData.filter(function(offer) {
return offer.offer_name == $scope.offerName;
});
$scope.selectedIndex = index;
}
})
.controller('abCtrl',function($scope,$http,$stateParams,$filter,$window) {
$http.get("http://tools.vcommission.com/api/coupons.php?apikey=e159f64e3dd49fddc3bb21dcda70f10c6670ea91aac30c7cb1d4ed37b20c45b8").then(function (response) {
var offerName = $stateParams.offer_name;
$scope.filteredOffers = $filter('filter')(response.data, {offer_name: offerName});
// $scope.filteredOffers = _.filter(response.data, ["offer_name",offerName]);
console.log($scope.filteredOffers)
console.log(offerName)
$scope.dealopen = function($a){
for (var i=0;i<response.data.length;i++)
{
//console.log($scope.data[i].name);
$link=response.data[i].link;
if ($link==$a)
{
$window.open($link,"_self","location=yes");
console.log($a);
}
}
}
});
});
Html
<div class="row" ng-app="Sab" ng-controller="menuCtrl" >
<ng-view></ng-view>
<div class="col col-100 " ng-repeat="da in myData | unique: 'store_image'" >
<div class="card col " >
<img class=" img-responsive " ng-src="{{ da.store_image}}"
ng-click="showData(da.offer_name, $index)"
/>
<div class="caption">
<a class="item item-text-wrap" href="#/Deals/{{da.offer_name }}" ng-click="showData(da.offer_name, $index)"
>
<b class="group inner list-group-item-heading center-block">
{{da.category }} Deals </b>
</a>
</div>
</div>
</div>
</div>
</div>