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](https://jsfiddle.net/) ? – Natiq Sep 25 '16 at 20:40 — Natiq, Sep 25 '16 at 20:40
this fiddle best describes the problem – Noor Sep 25 '16 at 21:11 — Noor, Sep 25 '16 at 21:11
I have edited the question based on the JSFiddle – Noor Sep 25 '16 at 21:16 — Noor, Sep 25 '16 at 21:16
JSFiddle provided has different code than yours. – Pradeepb Sep 25 '16 at 21:20 — Pradeepb, Sep 25 '16 at 21:20

score 1 · Answer 1 · edited May 23 '17 at 12:15

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.

I want to bind "OneGroupViewerController" to the row not the entire table — Noor, Sep 25 '16 at 21:48

Sri Kanth · Accepted Answer · 2016-09-26T02:54:38.003

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 '16 at 02:54

answered Sep 25 '16 at 21:30

Sri Kanth

151
8

I want to bind "OneGroupViewerController" to the row not the entire table – Noor Sep 25 '16 at 21:48
Here you go Noor, have updated the code. let me know if that works for you. – Sri Kanth Sep 26 '16 at 02:55
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 ? – Noor Sep 26 '16 at 05:43
Ref: http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs – Sri Kanth Sep 26 '16 at 05:47

Angular JS Error with Parent Child controller

2 Answers2