Issue: I am encountering an error in my Angular / Rails app. When trying to access a Rails controller function from the Angular controller, I receive the following error:
Uncaught TypeError: tasks.moveOrder is not a functiontasks_controller.rb
def index
respond_with Task.all
end
def create
respond_with Task.create(task_params)
end
def destroy
task = Task.find(params[:id])
task.destroy
respond_with task
end
def show
respond_with Task.find(params[:id])
end
def moveOrder # This specific function cannot be found
task = Task.find(task_id)
task.position = pos
respond_with task
end
def up_completion
task = Task.find(params[:id])
task.increment!(:completion)
respond_with task
end
def down_completion
task = Task.find(params[:id])
task.decrement!(:completion)
respond_with task
end
private
def task_params
params.require(:task).permit(:title, :completion, :importance, :steps, :clicked, :position)
end
All these functions possess routes and are invoked through my angular controller:
MainCtrl.js
.controller('MainCtrl', [
'$scope',
'tasks',
function($scope, tasks){
$scope.tasks = tasks.tasks;
$scope.items = ['one', 'two', 'three'];
$scope.addTask = function() {
var taskPosition = tasks.tasks.length + 1;
if(!$scope.title || $scope.title === '') { return; }
tasks.create({ // This call to the .rb file works!
title: $scope.title,
importance: $scope.importance,
completion: 0,
steps: $scope.steps,
clicked: false,
position: taskPosition // places position as field in db (needs updating when dragged)
});
$scope.title = '';
$scope.importance = '';
$scope.steps = '';
};
$scope.moveTask = function(start_pos, end_pos) {
$.get( "http://localhost:3000/tasks.json" )
.done(function( data ) {
var task_id = data[start_pos].id;
tasks.moveOrder(task_id, end_pos) // Calling the .rb file fails here!
});
};
...
app.js
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/_home.html',
controller: 'MainCtrl',
resolve: {
taskPromise: ['tasks', function(tasks){
return tasks.getAll();
}]
}
})
.state('tasks', {
url: '/tasks/{id}',
templateUrl: 'tasks/_tasks.html',
controller: 'TasksCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
Could the failure of this function call be due to incorrect code implementation or some other underlying issue?