从父控制器调用子控制器中的函数

Question

我有一个控制器嵌套在另一个控制器中。

<div ng-controller="manufacturerController" ng-cloak>
    <div ng-controller="contractController" ng-cloak>
        <div data-ng-if="item" class="panel panel-default">
            <div class="panel-heading text-center">
                <span class="h3">Contract</span>
            </div>
        </div>
    </div>
    <button data-ng-if="item && !ajaxOut" class="btn btn-success" data-ng-click="saveItem()">Save</button>
</div>

saveItem() 通过按钮调用，代码在 manufacturerController 中：

    $scope.saveItem = function () {
        $scope.ajaxOut = true;
        $scope.saveContracts();
    };

但是函数saveContracts()在contractController中。我想从 manufacturerController.saveItem().

调用 contractController.saveContracts()

根据这里，我应该可以很好地调用父方法：

但是保存冻结了浏览器。我做错了什么，我该如何解决？

Answer 1

您可以使用 $broadcast 从 parent 到 child:

function ParentCntl($scope) {

    $scope.msg = "";
    $scope.get = function(){
        $scope.$broadcast ('someEvent');
        return  $scope.msg;        
    }
}

function ChildCntl($scope) {               
    $scope.$on('someEvent', function(e) {  
        $scope.$parent.msg = $scope.get();            
    });

    $scope.get = function(){
        return "xyz";    
    }
}

Answer 2

查找“$on $emit $broadcast angularjs”。那里有无数的例子。

（正如我之前在评论中所说，您不希望控制器彼此了解。一个发送 event/notification，另一个听到它，有点像您不认识的人只是站在一个房间里大喊一个你感兴趣的名字）。

每个用于不同的上下文。根据您正在做的事情，您可能会使用一个或另一个。了解其中的每一个对于 AngularJS 开发人员来说都是非常重要的（对于任何 UI 开发人员来说，整体概念也是如此）。

Answer 3

一种方法是在范围内广播事件：

function ParentController($scope) 
{
  $scope.$broadcast('someEvent', args);
}

function ChildController($scope) 
{
  $scope.$on('someEvent', function(event, args) {});
  // another controller or even directive
}

Scope Events Propagation

Scopes can propagate events in similar fashion to DOM events. The event can be broadcasted to the scope children or emitted to scope parents.

— AngularJS Developer Guide - Scope Event Propagation

有关详细信息，请参阅 Can one controller call another?

从父控制器调用子控制器中的函数

Calling function in child controller from parent controller

angularjs

angularjs-controller

Scope Events Propagation