unable to return array list from the javascript function in angularjs app

Question

This is my link in mvc view and it is redirecting to details view by invoking function call. pls see below.

<a href="/Home/Details" class="label label-primary" ng-click="addTask(c)">View Details</a> 

TasksController.js

var lines =[] $scope.addTask= function(c) { lines.push(c); return lines; } alert(lines); 

the return value (lines) is becoming null always for some reason. I am unable to figure it out. What I am trying to achieve is ,

I am passing the details from one view to another view in angularjs app.

---

EDITED BELOW (latest)

I am getting totally crazy and unable to acccomplish this.

Index.cshtml

 <a href="/Home/Details" class="label label-primary" ng-controller="TasksController" ng-model="c" ng-click="addTask(c)">View Details</a> 

(c is my object which I am trying to pass it to the next page)

TaskController.js

app.controller("TasksController", ['$scope' ,'TasksService', function ($scope, TasksService) { $scope.addTask = function (currObj) { var promiseAddTsk = TasksService.addProduct(currObj); $scope.products = promiseAddTsk[0].Name; console.log($scope.products); }; 

}]);

TasksService.js

 var productList = []; this.addProduct = function (newObj) { productList.push(newObj); return productList; }; 

Details.cshtml

<div ng-app="TasksModule" ng-controller="TasksController"> <div> {{products}} <span ng-model="products">{{products}}</span> </div> 

I can see the "Name" in scope.Products but it doesn't get bind in details.cshtml.

Answer 1

I'd suggest you create a service. You'd then need to inject the service into each controller and use the build in $q service to return the promise. The service would look something like this

.factory('Task', function($q) { var lines = []; return { addTask: function(c) { var deferred = $q.defer(); lines.push(c); deferred.resolve(lines); return deferred.promise; } }; }); 

and then you'd inject and use the service inside your controller like this ..

.controller('TasksController', function($scope, Task) { $scope.addTask = function(c){ var lines = Task.addTask(c); alert(lines); } }); 

Answer 2

I believe your are missing ng-model in your HTML.

It should be:

<a href="/Home/Details" class="label label-primary" ng-click="addTask(c)" ng-model="c">View Details</a> 

If that is where the task is being set. If it is set in a form, then the ng-model needs to be set on the elements that sets the task, such as an input field.

The ng-model="c" should go wherever the task is being set on the UI. Also for the time begin, try placing logic in one controller and separate out afterwords after proof of concept.

<div ng-app="TasksModule" ng-controller="TasksController"> <a href="/Home/Details" class="label label-primary" ng-click="addTask(c)" ng-model="c">View Details</a> <div> {{products}} <span ng-model="products">{{products}}</span> </div> </div> 

Then "c" or whatever you decide to call it would be passed from that element to the function addRask(c) as a parameter.

You could also inject $log into your factory and $log.debug the variable to see to what it is being set via the console.

http://www.w3schools.com/angular/angular_directives.asphttps://docs.angularjs.org/api/ng/directive/ngModel

Edit: make sure ng-click="addTask(product)" is set correctly, the name of the variable you are passing from the UI to the angular controller must be the same as the name of the model. You might have to move ng-click="addTask(product)" from the tag to a separate button and keep the tag dedicated to one task only.

One thing of note is that you are using two different controllers - Task and Details. A service for sharing data between controllers will work but for testing purposes, use the same controller in Index.cshtml as you do in Details.cshtml.