Angular JS Fehler mit Eltern Kind Controller

Question

Ich bekomme einen seltsamen Fehler mit Winkel-Controller. Der Fehler wird auf dieser JSFiddle Eine Probe von HTML wiedergegeben:

<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) { 

} 

Fehler:

1. Warum "Test" nicht angezeigt in der Textbox obwohl der Eltern-Controller obje ct wurde verwiesen
2. , wenn die Taste gedrückt wird, ändern, warum die Textbox den neuen Wert von selectedObject enthält

Answer 1

Sie haben kleinere Fehler gemacht und es ist auch keine gute Idee, ng-controller mit ng-repeat zu verwenden.

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) { 

} 

Arbeits Geige: https://jsfiddle.net/3L4gg6jv/7/

Answer 2

Sie haben einen kleinen Fehler gemacht, denke ich. Verwenden Sie den folgenden Code und lassen Sie mich wissen, wenn es funktioniert. Code arbeiten 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-Datei

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 das Konzept zu verstehen.