从父控制器调用子控制器中的函数。
从父控制器调用子控制器中的函数。
我有一个嵌套在另一个控制器中的控制器。
合同
通过按钮调用saveItem(),代码位于manufacturerController中:
$scope.saveItem = function () { $scope.ajaxOut = true; $scope.saveContracts(); };
但是saveContracts()函数位于contractController中。我想从manufacturerController中调用contractController.saveContracts()。
根据这里的信息,我应该能够很好地调用父方法:如何在angularjs中从另一个控制器中调用函数?
但是保存操作会导致浏览器冻结。我做错了什么,如何修复?
问题的原因是父控制器需要调用子控制器中的函数。解决方法是使用AngularJS中的作用域事件传播机制。可以通过在父控制器中广播一个事件,然后在子控制器中监听该事件来实现调用子控制器中的函数。
具体的解决方法如下所示:
在父控制器中,使用$scope.$broadcast方法广播一个事件,并传递参数args:
function ParentController($scope) { $scope.$broadcast('someEvent', args); }
在子控制器中,使用$scope.$on方法监听该事件,并在回调函数中执行相应的操作:
function ChildController($scope) { $scope.$on('someEvent', function(event, args) { // 执行相应的操作 }); }
这样,当父控制器广播了名为'someEvent'的事件时,子控制器就会监听到该事件,并执行回调函数中的操作。
通过这种方式,父控制器可以调用子控制器中的函数,实现它们之间的通信和交互。
更多关于作用域事件传播的信息,可以参考AngularJS官方文档中的《Scope Events Propagation》一节。
另外,还可以参考stackoverflow上的相关问题《Can one controller call another?》获取更多信息。
原因:在AngularJS中,父控制器和子控制器之间是相互独立的,它们没有直接的通信机制。因此,要在父控制器中调用子控制器的函数需要一种解决方法。
解决方法:AngularJS提供了三个方法来实现控制器间的通信:$on,$emit和$broadcast。这三个方法可以用来分别在子控制器和父控制器之间进行事件的订阅、广播和传递。
$on方法用于在子控制器中订阅事件,当事件被广播时,子控制器可以通过这个方法来响应事件。
$emit方法用于在子控制器中触发事件并向父控制器传递数据,父控制器可以通过$on方法来监听并响应这个事件。
$broadcast方法用于在父控制器中触发事件并向子控制器传递数据,子控制器可以通过$on方法来监听并响应这个事件。
通过使用这三个方法,可以在父控制器中调用子控制器的函数。具体实现方法可以参考AngularJS的相关文档和教程。以下是一个简单的示例代码:
// 父控制器 app.controller('ParentController', function($scope) { $scope.$broadcast('eventName', eventData); // 触发事件并传递数据 }); // 子控制器 app.controller('ChildController', function($scope) { $scope.$on('eventName', function(event, eventData) { // 订阅事件 // 处理事件响应逻辑,调用子控制器的函数 }); });
问题出现的原因:
在父控制器中调用子控制器的函数时,子控制器的作用域并不是父控制器的直接子级,导致无法直接调用子控制器的函数。
解决方法:
可以使用$broadcast从父控制器向子控制器传递消息,并在子控制器中监听该消息,从而触发子控制器的函数。
以下是解决方法的具体实现代码:
父控制器:
function ParentCntl($scope) { $scope.msg = ""; $scope.get = function(){ $scope.$broadcast ('someEvent'); // 使用$broadcast向子控制器传递消息 return $scope.msg; } }
子控制器:
function ChildCntl($scope) { $scope.$on('someEvent', function(e) { // 监听消息 $scope.$parent.msg = $scope.get(); // 调用子控制器的函数 }); $scope.get = function(){ return "xyz"; } }
通过以上代码,可以实现从父控制器中调用子控制器的函数并获取返回值。