One of the challenges I faced in my application was dealing with nested views within several screens. After experimenting with different approaches, I discovered that creating modal dialog boxes and sliding panels as actual nested states with corresponding URLs rather than just relying on Javascript embedded within the HTML made things much simpler. This strategy not only promoted reusability but also streamlined the process of creating new pages requiring dialogs or panels.
For instance, defining modal and right panel child states as Angular UI states could look something like this:
.state('courses.detail.courseVersion.page', {
url: '/sections/:sectionId/pages/:pageId',
templateUrl: 'app/courses/courses.detail.courseVersion.page.html',
resolve: {
page: function(Model, $stateParams) {
{not relevant}
}
},
controller: 'PageDetailController'
})
.state('courses.detail.courseVersion.page.edit', {
url:'/edit',
views: {
'rightPanel@': {
templateUrl: 'app/courses/courses.detail.courseVersion.page.edit.html',
resolve: {
{not relevant}
},
controller: 'PageFormController'
}
}
})
.state('courses.detail.courseVersion.page.delete', {
url: '/delete',
views: {
'modal@': {
templateUrl: 'app/courses/courses.detail.courseVersion.deletePage.html',
resolve: {
{not relevant}
},
controller: 'DeletePageController'
}
}
})
In DeletePageController or PageFormController, I encountered a situation where I needed to access the scope in PageDetailController. Specifically, if the Page’s title was edited, I wanted to be able to update the parent scope with that information without reloading the entire page (which would defeat the purpose of using ajax).
My initial thought was to utilize $scope.$parent to achieve this; however, I discovered that it was actually null. This was a contrast to regular nested states without named views.
Is there a reliable way to access the parent scope without resorting to the root scope or a custom service to address this issue? My goal is simply to call a function on the parent scope to update the values – an elegant solution to my problem which seems unattainable without involving the root scope.