javascript - 在 AngularJS 中使用 JSON 数组的嵌套 Controller

Question

我想要像这样的嵌套 Controller ......

Controller 1 - 这是父 Controller 。它由来自 REST 并使用 ngRepeat 的 JSON 数组填充。

Controller 2 - 这是 child 。它也应该从 REST 调用获取数据，但它需要知道它位于哪个父对象下。

这是一个视觉效果...

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

将通过调用 REST 服务并传递有关父级的信息来填充子级。

有道理吗？

这是我构建的一些 HTML...

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

这是我正在工作的一些代码，用于填充父 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

关于 Angular，您应该了解的一件非常酷的事情是，如果一个 Controller 位于另一个 Controller 下的子元素上，那么它将继承父级的值到其范围内。它通过prototypal inheritance来做到这一点。这是值得一读的，但它基本上意味着您对子作用域所做的任何更改都不会修改父作用域，因此您不会破坏任何内容(您仍然可以在父作用域上调用可以破坏父作用域的方法)我相信您可以想象干扰父作用域的其他方式，但希望您能明白我的观点)。所以如果你有:

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

然后您就有了“Beta” Controller 的三个实例，并且它们都具有由函数“Alpha”创建的父作用域。假设您为 alpha 编写了 Controller ，如下所示:

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

然后，在“Beta”的所有三个实例中，您都可以访问该父级:

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

现在，Beta 始终可以操纵 title，并且在自己的范围内，title 会发生变化，而不会影响其他同级。不过，如果它在集合中添加了一个矮人，那么……好吧……另一个矮人就会出现。

ng-repeat 是创建大量子作用域然后使用变量初始化每个子作用域的简单方法:

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

因此，每个重复的 div 标记都有自己的子作用域，并且已经设置了变量 dwarf 。它还可以访问 title 甚至 dwarves 集合。

整洁。

您还可以附加另一个 Controller :

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

在这种情况下，除了访问 dwarf、dwarves 和 title 之外，它还运行函数 Beta( ) 以便初始化它需要初始化的任何内容。

我已经为你附上了一个jsfiddle，所以你可以玩一个简单的例子: https://jsfiddle.net/p6e0wr1y/

希望这对您的具体实现有所帮助。如果您需要我具体解决您的问题，我会的，但我希望这个答案对任何发现自己处于类似困境的人都有值(value)。