I am trying to call a controller from the view. I used Chrome dev tool and I know that the controller is being called, but not execute.
My goal is to call the server to get more information about a channel that I would display after.
I don't really where to look at to make it work. Any advices about how to debug that kind of code?
Controller:
angular.module('guideController').controller('scheduleController', ['$scope', 'API', function($scope, API) {
$scope.getChannelSchedule = function(channelId) {
API.getScheduleForChannelId(channelId)
.success(function(schedule) {
$scope.schedule = schedule;
})
.error(function(error) {
//ERROR management
});
};
}]);
Factory:
angular.module('guideService', [])
.factory('API', ['$http', function($http) {
return {
getScheduleForChannelId: function(channelId) {
return $http.get('http://localhost:5000/schedule/' + channelId);
}
};
}]);
and the view:
<div class="container" ng-controller="scheduleController">
test {{scheduleController.getChannelSchedule(1234)}}
</div>
Edit: I've been able to solve my problem.
I changed the syntax to
<tr class="channel-body" ng-controller="channelController" ng-repeat="channel in channels | limitTo:40">
<td ng-repeat="program in programs">
{{program.title}}
</td>
</tr>
and modified the controller to:
angular.module('guideController')
.controller('channelController', ['$scope', 'API', function($scope, API) {
$scope.getPrograms = function() {
alert($scope.schedule);
API.getScheduleForChannelId($scope.channel.channelId).
then(function(data) {
$scope.programs = data.data;
});
};
$scope.getPrograms();
}]);
and it worked. I didn't understand how to use the controller. It may be not perfectly designed, but it is working as intended.
scheduleController.getChannelSchedule()
and it does not make sense to execute a function in interpolation(which returns nothing) and which sets scope property asyncronously. Be careful interpolations gets run every digest cycle. – PSL Feb 3 at 0:30()
. – Claies Feb 3 at 0:31$scope
? – Sulthan Feb 3 at 0:54