Twitter Bootstrap Question posted in

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

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>
Tags:

4

Answers


  1. 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);
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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;
      }

    });
    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search