Question

在此代码中，我们有一个父控制器和一个子控制器。在HTML中，请注意父控制器包含子控制器。在父控制器中，我使用$ controller服务，它获取子控制器的范围。子控制器的$ scope.Child将被分配给$ scope.Parent。单击时会有一个按钮，将$ scope.Child更改为子控制器中的“new child”值。

我也试图在父控制器中实现相同的更改。我期待 $ scope.Parent将值作为“new child”以及在$ scope.Child上放置$ watch（）。但是，$ scope.Parent

中没有反映子控制器的$ scope.Child值的变化

那么，我的问题是如何将子控制器中$ scope.Child值的更改分配给父控制器？

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('myApp',[]);

    app.controller('parent', function($scope,$controller){  
        var childScope = $controller('child',{$scope: $scope});
        $scope.Parent = $scope.Child; 
        $scope.$watch('Child',function(){
            $scope.Parent = $scope.Child;
        },true);
    });

    app.controller('child',function($scope){
        $scope.Child = "child";
        $scope.changeValue = function() {
            $scope.Child = "new child";
        }
    });
</script>
<body ng-app="myApp">
 <div ng-controller="parent">
    <p>this is parent: {{Parent}}</p>
    <div ng-controller="child">
        <p>this is {{Child}}</p>
        <button ng-click="changeValue()">Click!</button>
    </div>
 </div>
</body>
</html>

Answer 1

使用$emit - 通过范围层次结构a.e.调度事件向上。用基本的话 - 从子控制器通知父控制器。

$scope.changeValue = function() {
        $scope.Child = "new child";
        $scope.$emit('onChildChange', {data: $scope.Child});
    }

在父控制器中：

$scope.$on('onChildChange', function (event, result) {
    console.log(result.data)
});

一些Fiddle demo如何运作

关于你的例子：

 var childScope = $controller('child',{$scope: $scope});
 $scope.Parent = $scope.Child; 
 $scope.$watch('Child',function(){
    $scope.Parent = $scope.Child;
 },true);

在父控制器中加载子范围是不好的做法。它可能导致意外的行为，并且它真的很难处理这种代码。此外，深观看a.e. $scope.$watch({}, true)是一种过度杀伤，会影响表现。在我们的情况下，$emit将触发事件，并且监听此事件的人将捕获它。这里没有多余的观察者

如何在AngularJS中将变量值从子控制器分配给父控制器？

1 个答案: