Comments (10)
@leighmillard We use ui-router for routing. I think you might not clearly understand how nested states work https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
The most important thing for you to know is that Child states will load their templates into their parent's ui-view.
I think you might need to name your states courses.list
and courses.edit
and have some abstract state courses
for example
from blur-admin.
If I use an abstract state then this creates a menu option with a dropdown which isn't what I need.
There are basically 3 parts to the moduel,
list.html
edit.html
create.html
list.html should always load when 'courses' menu option is clicked and then there is another button for 'create' and an 'edit' on each course listed.
I have tried several different router techniques without any luck.
from blur-admin.
I can do it by using the following code but the 'courses' menu option does not highlight in the sidemenu
.state('courses', {
url: '/courses',
templateUrl: 'app/pages/courses/list.html',
controller: 'CoursesController',
controllerAs: 'vm',
title: 'Courses',
sidebarMeta: {
icon: 'fa fa-trophy',
order: 120,
},
})
.state('coursesCreate', {
url: '/courses/create',
templateUrl: 'app/pages/courses/create/create.html',
controller: 'CourseCreateController',
controllerAs: 'vm',
})
.state('coursesEdit', {
url: '/courses/edit/:ID',
templateUrl: 'app/pages/courses/edit/edit.html',
controller: 'CourseEditController',
controllerAs: 'vm',
});
}
from blur-admin.
@leighmillard there is a helpful doc that explains router + sidebar in our theme https://akveo.github.io/blur-admin/articles/051-sidebar/
from blur-admin.
@smartapant thanks for the link to the sidebar docs. I had already had a look through this and it doesn't seem to cover this scenario.
I'm at a bit of a loss what to do with this as I have the same scenario running in other applications where the sidemenu is manually coded but as this is run using a directive it needs to work in a particular way. I can create a standard menu option as well as dropdown options using abstract but if I create 'courses' as abstract it cannot be a standard menu item, any other method then loses the ability to have the active menu option highlighted.
The easiest way I can explain what it is I want to do is if the user was to click a 'view' button on the one of the dashboard widgets it would go to dashboard/view/1234 (1234 being the ID)
This would be a new view and not a nested view on the same page.
The dashboard sidemenu option would stay highlighted
from blur-admin.
i dont think ui router can recognize coursesCreate & coursesEdit are in fact a child of courses route.
since you dont specify its parent or using state name dot notation. since ui-router is in fact read state parent & child relationship using state name/parent.
have you tried making courses.create
& courses.edit
?
dont make courses into abstract. put your courses content inside <div ui-view></div>
or else, try using modal window.
from blur-admin.
i'm having exactly the same problem. I have a main state 'jobs' and the substates 'new', 'edit', 'list'
If I go for
$stateProvider
.state('jobs', {
url : '/jobs',
templateUrl : 'app/pages/jobs/jobs.html',
title : 'Jobs',
sidebarMeta : {
icon : 'ion-ios-clock-outline',
order : 100
},
})
.state('jobs.list', {
url : '',
templateUrl : 'app/pages/jobs/jobs.list.html',
title : 'Jobs',
})
clicking the link in the sidebar does not load the jobs.list state automatically and the JS console is not throwing any errors. But if i make the parent abstract and click on the sidebar link the JS console throws errors, but typing /jobs in the address bar successfully loads the view with the embedded default state.
This looks like a problem with ui-router itself. using <a ui-sref="jobs"></a>
to navigate to the page tries to directly to navigate to the abstract state, while <a href="#/jobs"></a>
uses the $urlRouterProvider and therefore you can redirect from /jobs to /jobs/list.
$uiRouterProvider
.when('/jobs', '/jobs/list');
$stateProvider
.state('jobs', {
url : '/jobs',
templateUrl : 'app/pages/jobs/jobs.html',
title : 'Jobs',
sidebarMeta : {
icon : 'ion-ios-clock-outline',
order : 100
},
})
.state('jobs.list', {
url : '',
templateUrl : 'app/pages/jobs/jobs.list.html',
title : 'Jobs',
})
otherwise i have no idea what would make it possible to get nested views for a sidebar-single-link.
from blur-admin.
@blackanthrax
so /jobs is abstract route ?
what is the content of jobs.html ?
from blur-admin.
@vazh <div ui-view></div>
is sufficient to render it. currently i am looking into the sidebar directive if i can manage to get this link running, which will raise an error with my approach.
/jobs needs to be abstract, otherwise you can't render the sub-views.
$stateProvider
.state('jobs', {
abstract : true,
url : '/jobs',
from blur-admin.
@vazh @leighmillard okay i have a workaround. This is not really clean, but my javascript experience is quite limited and this needs to be overlooked by someone with more experience.
What i've done now is creating an abstract page with subpages as i did above. Now i edited app/theme/components/baSidebar/baSidebar.service.js
and replaced
stateRef: s.name,
with
stateRef: s.abstract === true ? meta.defaultSubview : s.name,
and provided the default subview in the module definition of my module
$stateProvider
.state('jobs', {
abstract : true,
url : '/jobs',
templateUrl : 'app/pages/jobs/jobs.html',
title : 'Jobs',
sidebarMeta : {
icon : 'ion-ios-clock-outline',
order : 100,
defaultSubview : 'jobs.list'
},
I hope this helps atleast a bit.
from blur-admin.
Related Issues (20)
- Hide title depending on the result of the localStorage
- i so crazy, that is so cool
- Unknown provider baSidebarServiceProvider HOT 1
- Blurry background does not work in Edge and FF. Performance issues.
- gulp serve no error but the page is abnormal HOT 14
- Gulp Build Issue with Inject HOT 4
- How to remove the # from the url HOT 1
- delete the package
- Error TypeError: this.zoomControl.update HOT 2
- 'gulp dev-release' js and css file paths replacement error
- View problem HOT 1
- Upgrade from blur-admin to Anguar 8+
- Blur admin pagination issue
- Integration issues
- this.zoomControl.update is not a function
- Issue on defaultText after changing theme to Blur Theme HOT 1
- Cannot install on Ubuntu 18.04? HOT 1
- The operation `#e85656 minus 24` is deprecated and will be an error in future versions. Consider using Sass's color functions instead. HOT 1
- TypeError: Cannot read property 'on' of undefined HOT 1
- Cant gulp serve the project HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blur-admin.