Angular UI - UI-Router - passing data and calling functions on child ui-view

Question

Using Angular JS - UI Router, I need to communicate from my parent view `project.details` to my child view `project.details.tasks`. How can my child view access the scope of the parent view? Also I would like my parent view to be able to call functions on my child view? How can I do this? This is a rough example of what I am trying to do: ``` .state('project.details', { url: "/:id", template: '<a ng-click="[target-route??]>childFunction()">', controller: function($scope){ $scope.parentString = "parent value"; } }) .state('project.details.tasks', { url: "/tasks", templateUrl: "project.details.tasks.html", controller: function($scope){ console.log("how do I get" + $scope.parentString + " here?"; $scope.childFunction = function() { console.log('Parent calling'); } }) ```

Accepted Answer

There are actually two questions here:

1) How to access the $scope of the parent:

This is simply solved by using `$scope.$parent....` (Solution provided by @ndpu)

2) How to call functions within the child view from the parent:

The solution that I have found for this is to create a shared service, here called `broadcastService`. Both parent and child view's controllers inject this service. This service uses $rootscope to broadcast events, and the child controller can listen for this event:

The Broadcast Service:

```
.factory('broadcastService', function ($rootScope) {
    var broadcastService = {};

broadcastService.message = '';

broadcastService.prepForBroadcast = function (msg) {
        this.message = msg;
        this.broadcastItem();
    };

broadcastService.broadcastItem = function () {
        $rootScope.$broadcast('handleBroadcast');
    };

return broadcastService;
});
```

The broadcasting controller, which injects the above shared service:

```
myApp.controller('projectTasksController', ['broadcastService', '$scope', function (broadcastService, $scope) {

$scope.sendMessageToChildView = function () {
           broadcastService.prepForBroadcast("hello there");
        }
}]);
```

The receiving controller which also injects the shared service:

```
.controller('projectsTaskListController', ['broadcastService', '$scope', function (broadcastService, $scope) {
        $scope.output = "";
        $scope.$on('handleBroadcast', function () {
            $scope.output = 'Received: ' + broadcastService.message;
        });

}]);
```

Angular UI - UI-Router - passing data and calling functions on child ui-view

Solution

Problem

Related problems