Question

我想拥有这样的嵌套控制器......

控制器1 - 这是父母。它来自一个来自REST的JSON数组并使用ngRepeat。

控制器2 - 这是孩子。它也应该从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>

以下是我工作的一些代码，用于填充父控制器......

<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应该学习的一个非常酷的事情是，如果控制器位于另一个控制器下面的子元素上，那么它会将父元素的值继承到其范围内。它通过prototypal inheritance执行此操作。这值得一读，但它基本上意味着您对子作用域所做的任何更改都不会修改父作用域，因此您不会破坏任何内容（您仍然可以调用父作用域上的方法）为你做腐败。我确信你可以想象其他干扰父范围的方法，但希望你能看到我的观点）。所以如果你有：

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

然后你有三个＆＃34; Beta＆＃34;控制器，并且它们都具有由函数＆＃34; Alpha创建的父作用域。＆＃34;所以，让我们说你为alpha编写控制器，就像这样：

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

然后，在＆＃34; Beta＆＃34;的所有三个实例中，您都可以访问该父级：

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

现在，Beta总是可以操纵标题，并且在自己的范围内，标题会改变而不会影响其他兄弟姐妹。如果它在集合中添加了一个矮人，那么......好吧......会出现另一个矮人。

ng-repeat是一种创建大量子范围的简单方法，然后使用变量初始化每个范围：

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

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

纯

您还可以将另一个控制器附加到其中：

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

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

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

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

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

1 个答案: