How to connect the ng-model of two different controller in angularjs?

Question

I have one table which will fill with the JSON data. After the filling table, If some one wants to modify any row then it will pop-up window, where you can modify.

What I am doing:
I made two controller, I want to pass the ng-model value from one controller to other controller which is controller for window. Please tell me how to connect these two controller. Please see the running example, http://plnkr.co/edit/6lRT1B1sYcEx0lVCJiZZ?p=preview

index.html

<!DOCTYPE html>
<html>

<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">ToDo API Client Demo</a>
        </div>
  </div>
  <div ng-app="myApp" ng-controller="tasksCtrl">

         <table class="table table-striped">
             <tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
            <tr ng-repeat="task in tasks">

            <td>{{task.title}}</td>
            <td>{{task.description}}</td>
                        <td>  <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>


            </tr>
         </table>

  </div>
  <div id="modal" role="dialog" class="modal hide fade">
        <div ng-controller="TaskController">
            <div class="modal-header">
                Task Dialog
            </div>
            <div class="modal-body">
                <label for="txtName"></label> 
                <input type="text"  ng-model="task.title" />
                <input type="text"  ng-model="task.description" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
            </div>
        </div>
   </div>
   <script>
    var app = angular.module('myApp', []);
    app.controller('tasksCtrl', function($scope, $http) {
        $http.get("data.json")
        //$http.get("/todo/api/v1.0/tasks")
        .success(function(response) {
          console.log(response.tasks)
          $scope.tasks = response.tasks;
        });
    });
    app.controller('TaskController', function($scope, $rootScope){
        $scope.editTask=function(task){
            $rootScope.task=task;
        }
    });

  </script>
</body>

</html>

possible duplicate of How can I pass some data from one controller to another peer controller — Sandro Munda
– Sandro Munda, Commented Jul 2, 2015 at 6:54
possible duplicate of How can I pass variables between controllers? — squiroid
– squiroid, Commented Jul 2, 2015 at 6:54

Alberto I.N.J. · Accepted Answer · 2015-07-02 07:18:40Z

2

First, place your ng-app="myApp" and ng-controller="tasksCtrl" to the body element.

E.g.

<body ng-app="myApp" ng-controller="tasksCtrl">

Then, move the

$scope.editTask=function(task) {
     $scope.task = task;
};

To the tasksCtrl. The TaskController is no longer needed. You can remove it.

Since, it only use one controller you can use $scope instead of $rootScope.

Here's the Plunkr.

Hope it helps.

answered Jul 2, 2015 at 7:18

Alberto I.N.J.

1,85315 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kyrisu · Accepted Answer · 2015-07-02 07:00:04Z

1

What you are trying to do would create a tight coupling between controllers but from what I see in the plunkr you would be better off with using angular-ui modal and just instantiate the modal window from code.

answered Jul 2, 2015 at 7:00

kyrisu

4,65312 gold badges46 silver badges68 bronze badges

Comments

Shubham Nigam · Accepted Answer · 2015-07-02 07:15:58Z

There are few mistakes that you did First one that you modal html code is not inside ng-app and you can use is Parent Child Concept of Angular ,In which you have no need to use $rootScope

Pluncker having complete solution of your problem:http://plnkr.co/edit/lRNJjM3aUIqQWFfE39yo?p=preview

Html:

  <div ng-app="myApp" ng-controller="tasksCtrl">

         <table class="table table-striped">
             <tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
            <tr ng-repeat="task in tasks">

            <td>{{task.title}}</td>
            <td>{{task.description}}</td>
                        <td>  <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>


            </tr>
         </table>


  <div id="modal" role="dialog" class="modal hide fade">
        <div ng-controller="TaskController">
            <div class="modal-header">
                Task Dialog
            </div>
            <div class="modal-body">
                <label for="txtName"></label> 
                <input type="text"  ng-model="Edittask.title" />
                <input type="text"  ng-model="Edittask.description" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
            </div>
        </div>
   </div>
    </div>

Controller:

var app = angular.module('myApp', []);
    app.controller('tasksCtrl', function($scope, $http) {
        $http.get("data.json")
        //$http.get("/todo/api/v1.0/tasks")
        .success(function(response) {
          console.log(response.tasks)
          $scope.tasks = response.tasks;
        });
         $scope.editTask=function(task){
            $scope.selectedTask=task;
        }
    });
    app.controller('TaskController', function($scope, $rootScope){
      $scope.Edittask={};
      $scope.Edittask.title="";
      $scope.Edittask.description="";
      $scope.saveTask=function(){
        console.log('called');
        $scope.selectedTask.title=$scope.Edittask.title;
        $scope.selectedTask.description=$scope.Edittask.description;
      }

    });

Thanks for reply, you link is not working, Please share the valid link, its not working Thanks
Your code is not loading the data to dialog box, if you switch in the second edit then it is update others also..

Ranjith S · Accepted Answer · 2015-07-02 06:56:36Z

0

If you need to access any methods in other controller and pass the data you could do like this,

angular.element(document.getElementById('OtherControllersId')).scope().methodInOtherController(data);

answered Jul 2, 2015 at 6:56

Ranjith S

2051 silver badge5 bronze badges

1 Comment

Michael Over a year ago

This is quite a hack and no clean solution. Also you shouldn't mix plain old javascript getElement with angulars element function.

Collectives™ on Stack Overflow

How to connect the ng-model of two different controller in angularjs?

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related