I'm running into an issue where, whenever I click the button inside my component, the $http call is made but I don't see the response in the console. Oddly enough, if I uncomment the $timeout function, the data does appear in the console.
Here's the relevant JavaScript code:
var app = angular.module('myApp', []);
app.controller('mainCtrl', [$scope, $http, $timeout, function($scope, $http, $timeout) {
$scope.navigate = function () {
$scope.getStats();
}
$scope.getStats = function () {
//$timeout(function () {
$http
.get('/scripts/controllers/fda/appSvc.json')
.then(function (response) {
console.log(response.data);
}, function (error) {
console.log(error);
})
//}, 0)
};
$scope.detailedTableCtrl = {
navigate: $scope.navigate
}
}]);
app.component("myBox", {
bindings: {
'detailedTableCtrl': '='
},
controller: function($element) {
},
controllerAs: 'myBox',
templateUrl: "/template",
transclude: true
})
And here's the corresponding HTML code:
<div ng-app="myApp" ng-controller="mainCtrl">
<my-box detailed-table-ctrl="detailedTableCtrl"></my-box>
</div><!--end app-->
<!--mybox component-->
<button class="btn btn-default btn-sm" ng-click="myBox.detailedTableCtrl.navigate()">
<span class="glyphicon glyphicon-chevron-left"></span>
<span>Back</span>
</button>