Angular JS Error with Parent Child controller

Question

I am getting a weird error with angular controllers. The error is reproduced on this JSFiddle A sample of HTML:

    <div ng-app>
  <div ng-controller="GroupViewerController">
          <table class="table table-striped">
                <tr ng-repeat="a in arr" ng-controller="OneGroupViewerController">
              <td >{{a}} <button ng-click="change(a)">change</button></td>
                </tr>
            </table>
  </div>
  <div ng-controller="oneGroupItemsController">
    <input type="text" ng-model="$parent.selectedObject">
  </div>
  </div>

JavaScript:

    function GroupViewerController($scope) {
  $scope.selectedObject = "test";
  $scope.arr = ["a","b"]
}

function OneGroupViewerController($scope) {
  $scope.change = function (a){
       $scope.$parent.selectedObject = a;
  }
}

function oneGroupItemsController($scope) {

}

Errors:

Why does "test" not appear in the textbox though the parent controller object has been referenced
when the button change is pressed, why does the textbox contains the new value of selectedObject

Can you provide jsFiddle ?

Natiq
– Natiq

2016-09-25 20:40:42 +00:00
Commented Sep 25, 2016 at 20:40 — Natiq
– Natiq, Commented Sep 25, 2016 at 20:40
this fiddle best describes the problem

Noor
– Noor

2016-09-25 21:11:50 +00:00
Commented Sep 25, 2016 at 21:11 — Noor
– Noor, Commented Sep 25, 2016 at 21:11
I have edited the question based on the JSFiddle

Noor
– Noor

2016-09-25 21:16:29 +00:00
Commented Sep 25, 2016 at 21:16 — Noor
– Noor, Commented Sep 25, 2016 at 21:16
JSFiddle provided has different code than yours.

Pradeepb
– Pradeepb

2016-09-25 21:20:35 +00:00
Commented Sep 25, 2016 at 21:20 — Pradeepb
– Pradeepb, Commented Sep 25, 2016 at 21:20
Just re-updated it, sorry

Noor
– Noor

2016-09-25 21:21:26 +00:00
Commented Sep 25, 2016 at 21:21 — Noor
– Noor, Commented Sep 25, 2016 at 21:21

Sri Kanth · Accepted Answer · 2016-09-26 02:54:38Z

1

You have made minor mistakes and also its not a good idea to use ng-controller with ng-repeat.

HTML:

<div ng-app>
  <div ng-controller="GroupViewerController">
          <table class="table table-striped" >
                <tr ng-repeat="a in arr" ng-controller="OneGroupViewerController">
              <td >{{a}} <button ng-click="change(a)">change</button></td>
                </tr>
            </table>
  <div ng-controller="oneGroupItemsController">
    <input type="text" ng-model="$parent.updateVar.selectedObject">
  </div>
  </div>

  </div>

JS:

function GroupViewerController($scope) {
  $scope.updateVar = {};
  $scope.updateVar.selectedObject = "test";
  $scope.arr = ["a","b"]
}

function OneGroupViewerController($scope) {
  $scope.change = function (a){
       $scope.$parent.updateVar.selectedObject = a;
  }
}

function oneGroupItemsController($scope) {

}

Working fiddle : https://jsfiddle.net/3L4gg6jv/7/

edited Sep 26, 2016 at 2:54

answered Sep 25, 2016 at 21:30

Sri Kanth

1418 bronze badges

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

4 Comments

Noor Over a year ago

I want to bind "OneGroupViewerController" to the row not the entire table

Sri Kanth Over a year ago

Here you go Noor, have updated the code. let me know if that works for you.

Noor Over a year ago

thanks, The answer works, but I do not understand why we have to define selectedObject in updateVar and why can't we do something like $scope.selectedObject = "test"; directly ?

Sri Kanth Over a year ago

Ref: stackoverflow.com/questions/14049480/…

Community · Accepted Answer · 2017-05-23 12:15:06Z

1

You have made a small mistake I guess. Use the below code and let me know if it works. working code here

<div ng-app>
   <div ng-controller="GroupViewerController">
      <table class="table table-striped" >
            <tr ng-repeat="a in $parent.arr" ng-controller="OneGroupViewerController">
              <td>{{a}} <button ng-click="change(a)">change</button></td>
            </tr>
      </table>
      <div ng-controller="oneGroupItemsController">
          <input type="text" ng-model="$parent.selectedObject">
      </div>
  </div>
</div>

// JS file

function GroupViewerController($scope) {
  $scope.selectedObject = {};    // this you have to change in your code. 
  $scope.selectedObject.test = "test";
  $scope.arr = ["a", "b"]
}

function OneGroupViewerController($scope) {
  $scope.change = function(a) {
    $scope.$parent.selectedObject.test = a;
  }
}

function oneGroupItemsController($scope) {

}

Go here to understand the concept.

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Sep 25, 2016 at 21:25

Pradeepb

2,5723 gold badges28 silver badges48 bronze badges

2 Comments

Noor Over a year ago

I want to bind "OneGroupViewerController" to the row not the entire table

Pradeepb Over a year ago

Accept the answer if it helped you.:)

Collectives™ on Stack Overflow

Angular JS Error with Parent Child controller

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related