AngularJS - 将新创建的孩子推到主窗体的孩子的选择

Question

我有一个窗体有两个选择，（1）父和（2）孩子。一旦选择了Parent项目，Children select选项就会分别动态填充。目前，两者都在父控制器内。在每个选择旁边添加一个新的。当添加一个新父项时，将出现一个模式，一旦输入新内容，就会输入一个新父项，禁止用户错误，更新数据库，模式关闭，父控制器将新父项推送到范围，并显示在父母选择。

儿童选择是一个问题。它打开一个ChildrenController的模式，虽然我可以将新创建​​的子添加到数据库，但我无法将模式关闭，因为子选择位于父控制器下方，因此无法将其推送到主窗体。

如何将新创建的孩子推送到主窗体的孩子选择？

主要形式：

<div ng-controller="ParentController"> 
    <div id="ParentDiv"> 
    <select ng-model="parent" ng-options="parent.Name for parent in parents"> 
    <option value="" selected>Select Parent ..</option> 
    </select> 
    <button class="addNew" ng-click="openDialog()"><i class="icon-plus"></i> [ add new ]</button> 
    </div> 

    <div id ="ChildDiv"> 
    <select ng-model="child" ng-options="child.Name for child in parent.Childs"> 
    <option value="" selected>Select Child After Parent ..</option> 
    </select> 
    <button class="addNew" ng-click="openDialog()"><i class="icon-plus"></i> [ add new ]</button> 
    </div> 
</div> 

Blesh发现在聊天，我的解决办法：2步

function ParentsCtrl($scope, $rootScope, $routeParams, $http, API, $location, $dialog) { 

    // Step #1 

    $scope.Parent = {}; 
    $scope.addModel = function (item) { 
    $scope.Parent.Childs = $scope.Parent.Childs || []; 
    $scope.Parent.Childs.push(item); 
}; 
....... 
} 

功能ChildrenCtrl（$范围，$ rootScope，$ routeParams，$ HTTP， API，$ location，$ dialog）{

//步骤＃2

// Create 

    var copy = angular.copy($scope.child); 
    $http.post('/api/Childs/', copy) 
     .success(function() { 
      console.log('Copy Name 2: ' + copy.Name); 
      $scope.addModel(copy); 
     }) 
     .error(function (data) { 
      alert(data); 
     }); 
}; 
}; 

}

Answer 1

所以我们落得这样做增加了，可以从孩子控制器被称为基于执行添加父控制器的方法是什么选择：

function ParentCtrl($scope) { 
    $scope.parentItems = [ 
     { name: 'foo', children: [] }, 
     { name: 'bar', children: [] } 
     { name: 'test', children: [] } 
    ]; 

    $scope.addChild = function(item) { 
     $scope.selectedParent.children.push(item); 
    }; 
} 


function ChildCtrl($scope, $http) { 
    $scope.doSomething = function() { 
     var item = { childName: 'test child' }; 
     /* TODO: stuff here */ 
     $scope.addChild(item); 
    }; 
} 

<div ng-controller="ParentCtrl"> 
    <select ng-model="selectedParent" ng-options="x.name for x in parentItems"></select> 
    <div ng-controller="ChildCtrl"> 
     <a ng-click="doSomething()">do something and add child</a> 
    </div> 
</div> 

这个想法是子控制器可以调用父范围提供的add函数。