Angular -ui / ui-router, how do I add a partial view using $ stateProvider?

Question

I am trying to enter a panel for editing, depending on whether the viewer is the owner or not. Right now, I'm having problems just entering a panel / partial view in html. I want my compositions /views/view.html to be the "base" html page into which the partial was entered. A partial view is then presented in /views/partials/views.tools.html. Does anyone see something wrong with my $ stateProvider, which explains why I cannot embed my partial in my view.html?

Here is my $ stateProvider:

$stateProvider .state('all compositions', { url: '/compositions/recent', templateUrl: 'compositions/views/list.html' }). state('view', { url: '/compositions/view/:compositionId', views: { 'theTool':{ templateUrl:'compositions/views/partials/view.tool.html' , controller: 'CompositionsController' } }, templateUrl: 'compositions/views/view.html', controller: 'CompositionsController', }). //other states here 

this is my markup for my view.html (main html)

 <div ui-view="theTool"></div> <section data-ng-controller="CompositionsController" data-ng-init="findOne()"> <h2>{{composition.title}}</h2> <div ng-bind-html="trustedContent"></div> </section> 

Any help or advice is appreciated. Thanks

Answer 1

Here I created a working working example that should give all the answers.

Adjusted Status Error:

 $stateProvider .state('allCompositions', { url: '/compositions/recent', templateUrl: 'compositions.views.list.html' }). state('view', { url: '/compositions/view/:compositionId', views: { '': { templateUrl: 'compositions.views.view.html', controller: 'CompositionsController', }, ' theTool@view ': { templateUrl: 'compositions.views.partials.view.tool.html', controller: 'CompositionsController' } }, 

Most importantly, compositions.views.view.html now serves as the target for the sibling theTool . both representations are defined in the same state ("view"), but one of them is introduced into the other.

Also in index.html I made this change:

 <!--<div ui-view="theTool"></div>--> <div ui-view=""></div> 

so now we have an unnamed ui-view instead of a name. That is why both conditions

• allCompostions
• view

which aim at an unnamed view, '' now display correctly. See here for more details.

More about view insertion logic:

• Browse Names - Relative and Absolute Names

small cite:

Behind the scenes, each view is given an absolute name that follows the viewname@statename scheme, where viewname is the name used in the view directive, and the state name is the absolute state name, for example. contact.item. You can also write name names in absolute syntax.

Amazing examples from the same source:

 .state('contacts.detail', { views: { //////////////////////////////////// // Relative Targeting // // Targets parent state ui-view // //////////////////////////////////// // Relatively targets the 'detail' view in this state parent state, 'contacts'. // <div ui-view='detail'/> within contacts.html "detail" : { }, // Relatively targets the unnamed view in this state parent state, 'contacts'. // <div ui-view/> within contacts.html "" : { }, /////////////////////////////////////////////////////// // Absolute Targeting using '@' // // Targets any view within this state or an ancestor // /////////////////////////////////////////////////////// // Absolutely targets the 'info' view in this state, 'contacts.detail'. // <div ui-view='info'/> within contacts.detail.html " [e-mail] " : { } // Absolutely targets the 'detail' view in the 'contacts' state. // <div ui-view='detail'/> within contacts.html " detail@contacts " : { } // Absolutely targets the unnamed view in parent 'contacts' state. // <div ui-view/> within contacts.html "@contacts" : { }