Angular ui.router, call parent controller function from child controller?
I'm using Angular with ui.router and have setup a nested view. The parent view has a div whose visibility I can toggle through a function on the parent controller. I'd like to call this function from the child controller of the nested view. How would I do this?
Answer
http://plnkr.co/edit/zw5WJVhr7OKqACoJhDZw?p=preview
JS
angular
.module("myApp", [])
.controller("parent", function($scope) {
$scope.parentFunction = function() {
alert("Called a function on the parent")
};
})
.controller("child", function($scope) {
$scope.childFunction = function() {
alert("Called a function on the child")
};
$scope.parentFromChild = function() {
alert("I know this feels weird");
$scope.parentFunction();
};
})
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="parent">
<div ng-controller="child">
<a href="#" ng-click="parentFunction()">Call Parent</a>
<a href="#" ng-click="childFunction()">Call Child</a>
<a href="#" ng-click="parentFromChild()">Call Parent from Child</a>
</div>
</div>
</body>
</html>
The scope on controllers is prototypically inherited I believe which means if you don't redefine a function on the scope you get the same function from the parent scope if you call it (the problem is this then makes the assumption about the context of the use of this controller though it's debatable if this is really an issue assuming you don't depend on some effect from that controller in this controller).