在AngularJS中使用JSON数组的嵌套控制器

Question

I wanted to have nested controllers like this...

Controller 1 - This is the parent. It is populated from a JSON array that comes from a REST and uses ngRepeat.

Controller 2 - This is the child. It should get data from a REST call as well, but it needs to know which parent object it is under.

Here's a visual...

Parent 1
---Child 1
---Child 2
---Child 3
Parent 2
---Child 4
---Child 5
---Child 6

The children will be populated by calling a REST service and passing info about the parent.

Make sense?

Here is some HTML that I have structured...

<div ng-app="App">
    <div ng-controller="spRisks">
        <table width="100%" cellpadding="10" cellspacing="2" class="employee-table">
            <tr ng-repeat="risk in Risks">
                <td>
                    <table width="100%" cellpadding="10" cellspacing="2" class="employee-table">
                        <tr id="{{risk.Id}}RiskDesc">
                            <td>{{risk.Risk_x0020_Description}}</td>
                        </tr>
                        <tr id="{{risk.Id}}RiskControls">
                            <td>
                                <div ng-controller="spControls">
                                    <table width="100%" cellpadding="10" cellspacing="2" class="employee-table">
                                        <tr ng-repeat="control in Controls">
                                            <td id="{{control.Id}}Control">{{control.Title}}</td>
                                            <td>
                                                <input type="radio" name="{{control.Id}}Answer" value="Yes">Yes
                                                <input type="radio" name="{{control.Id}}Answer" value="No">No
                                            </td>
                                            <td>
                                                <textarea id="{{control.Id}}Comment"></textarea>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>

And here is some code I have working that populates the parent controller...

<script>
function getDataWithCaml(listName, caml) {
    var endpoint = "https://myteamsite.sharepoint.com//_api/web/lists/GetByTitle('" + listName + "')/GetItems(query=@v1)?@v1={\"ViewXml\":\"'" + caml + "'\"}";
    return jQuery.ajax({
        url: endpoint,
        method: "POST",
        headers: {
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "Accept": "application/json;odata=verbose",
            "Content-Type": "application/json;odata=verbose"
        }
    });
}

var App = angular.module('App', ['ngRoute'])
App.controller('spRisks', function ($scope, $http) {
    var caml = "<View><Query><Where><Eq><FieldRef Name='Owner'/><Value Type='Integer'><UserID/></Value></Eq></Where></Query></View>";
    var ownerData = getDataWithCaml("Owners", caml);
    ownerData.success(function (data) {
        var arrayOfExpressions = [];
        for (var i = 0; i < data.d.results.length; i++){
            arrayOfExpressions.push(CamlBuilder.Expression().LookupMultiField("Process_x0020_Owner_x0020_Title").EqualTo(data.d.results[i].Title));
        }
        var newCaml = new CamlBuilder().View().Query().Where().All(arrayOfExpressions).ToString();
        newCaml = newCaml.replace(/"/g, '\'');

        var jsonData = getDataWithCaml("Risks", newCaml);
        jsonData.success(function (jsonDataResults) {
            $scope.$apply(function(){$scope.Risks = jsonDataResults.d.results;});
        });
    });
});
function replaceAll(string, find, replace) {
  return string.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
</script>

Answer 1

One very cool thing that you should learn about angular is that if a controller is on a child element underneath another controller, then it inherits the values of the parent into its scope. It does this through prototypal inheritance . This is worth reading up on, but it basically means that any changes you make to the child scope will not modify the parent scope, so you aren't going to corrupt anything (you can still call methods on the parent scope which can do corrupting for you. And I'm sure you can imagine other ways of interfering with the parent scope, but hopefully you see my point). So if you have:

<div ng-controller="Alpha">
   <div ng-controller="Beta"/>
   <div ng-controller="Beta"/>
   <div ng-controller="Beta"/>
</div>

Then you have three instances of the "Beta" controller, and all of them have a parent scope created by the function "Alpha." So let's say you write the controller for alpha, like so:

function Alpha($scope) {
   $scope.title = "Snow White and the Seven Dwarves";
   $scope.dwarves = ['Sleepy','Sneezy','Dopey','Bashful',
     'Grumpy','Doc','Happy'];
}

Then, in all three instances of "Beta", you gain access to that parent:

function Beta($scope) {
  // This will write out "Snow White and the Seven Dwarves".
  console.log($scope.title);
}

Now, Beta can always manipulate title, and within its own scope, title will change without affecting the other siblings. If it added a dwarf to the collection, though, then.. well... another dwarf would appear.

ng-repeat is an easy way to create lots of child scopes and then initialize each with a variable:

<div ng-controller="Alpha">
   <div ng-repeat="dwarf in dwarves"/>
</div>

So each repeated div tag has its own child scope with the variable dwarf already set. It also has access to the title and even the dwarves collection.

Neat.

You can also attach to it another controller:

<div ng-controller="Alpha">
   <div ng-controller="Beta" ng-repeat="dwarf in dwarves"/>
</div>

In which case, in addition to access to dwarf , dwarves , and title , it also runs the function Beta() in order to initialize whatever it needs to initialize.

I've attached a jsfiddle for you, so you can play around with a simple example: https://jsfiddle.net/p6e0wr1y/

I hope this helps with your specific implementation. If you need me to address your stuff specifically, I will, but I'd like this answer to be valuable to anyone who finds themselves in a similar predicament.