Modify views of a UI Router template - angularjs

Question

I'm trying to inject default data into a ui-view template.
$stateProvider.state('foo', {
template: '<div ui-view=bar></div>',
abstract: true,
views: {
bar: {
template: 'test'
}
}
});
$stateProvider.state('foo.whiz', {
// ...
});
This example doesn't work, but I hope it's enough to show you what I mean. So what I'm basically trying to do is, when I enter the state foo.whiz, which has a parent of foo, I'd like foo to inject default data into the bar ui-view. Currently it only seems you can populate named views via the child state (bar#foo)? How can I, essentially, initialize data via the route object?

Answer 1

I would say, there are 4 ways (maybe more) how to pass some stuff from child to parent. There is a working plunker.
Let's have these anchors/targets in the index.html:
<div ui-view="title"></div>
<div ui-view="scopeInheritance"></div>
<div ui-view="factory"></div>
<div ui-view="content"></div>
And this would be the common def of parent state 'foo'
.state('foo', {
url: '/foo',
views: {
'title' : { template: '<h3>foo - parent state title</h3>',},
'scopeInheritance' :
{
template: '<h3 ui-view="inheritance">{{parentModel.greeting}}</h3>',
controller: 'parentCtrl',
},
'factory' : { template: '<h3>{{dataHolder.message}}</h3>',},
'content' : {
template: '<div >Content of foo (parent) <ui-view /></div>',
},
},
})
I. child view replaces parent view completely
In this case, we will define different content for the view 'title' in our child state:
.state('foo.whiz', {
views: {
'title#' : {
template: '<h3>{{resolved}} - child state title</h3>',
controller : 'titleCtrl',
resolve : { resolvedData : function() { return "whiz"; }, },
},
...
So, we are using Absolute Names 'title#' to place our view into root template.
II. scope inheritance, child can fill properties of parents $scope.parentModel reference
.state('foo.whiz', {
views: {
'inheritance' :
{
controller: 'childCtrl',
},
...
Here we declare some model in parent $scope, and due to Scope Inheritance by View Hierarchy Only we can change these values in a child:
// parent declares model
.controller('parentCtrl', function($scope){
$scope.parentModel = { greeting : "Parent greets"};
...
// child changes value and does clean up
.controller('childCtrl', function($scope){
var remember = $scope.parentModel.greeting;
$scope.parentModel.greeting = "Child greets"
$scope.$on("$destroy", function (){$scope.parentModel.greeting = remember;});
...
III. factory as data holder
Simply let's inject some singleton, in angular world service/factory, as a holder of data into $rootScope
// singleton
.factory('dataHolder', function(){
return {};
});
// available everywhere
app.run(
['$rootScope', 'dataHolder',
function($rootScope, dataHolder) {
$rootScope.dataHolder = dataHolder;
...
// child can assign these, while parent will render them
.controller('childCtrl', function($scope){
$scope.dataHolder.message = "Child sent message"
Check that all here
IV. child view is nested in parent:
the most typical with UI-Router
// the anchor is inside of the parents view
.state('foo', {
views: {
'content' : { // the anchor for child
template: '<div >Content of foo (parent) <ui-view /></div>',
},
...
// child inject directily into parent
.state('foo.whiz', {
views: {
'' : {
template: '<h4>Content of whiz (Child)</h4>',
},
...
These are the basic ways how to pass data/view/messages with UI-Router (skipping the eventing system of angular at all)