I have been having some issues regarding routing of directives within directives.
This is my app.config for ui-routing:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('modules', {
url: '/home',
templateUrl: 'resources/modules/home/templates/module-panel.jsp'
})
.state('customer', {
url: '/customer',
templateUrl: 'resources/modules/customer/templates/customer-panel.jsp'
})
.state('customerProfile', {
url: '/customer/customerProfile',
templateUrl: 'resources/modules/customer/templates/customer-profile.jsp'
})
.state('customerList', {
url: '/customer/customerList',
templateUrl: 'resources/modules/customer/templates/customer-list.jsp'
});
;
/*$locationProvider.html5Mode(true);*/
As far as my directives are concerned, the main directive is "customer" and its sub-directives are "customer-list" and "customer-profile" respectively.
This is the html for "customer" directive:
<span ng-controller="CustomerController as custCtrl">
<div class="sub-menu">
<ul class="menuList">
<li class=""><a class="anime" ui-sref="customerList" ng-class="{active: custCtrl.customerListPanel}" ng-click="custCtrl.openCustomerList()">Customer List</a></li>
<li class=""><a class="anime" ui-sref="customerProfile" ng-class="{active: custCtrl.customerProfilePanel}" ng-click="custCtrl.openCustomerProfile()">Customer Profile</a></li>
</ul>
</div>
<div ng-show="custCtrl.customerListPanel">
<customer-list></customer-list>
</div>
<div ng-show="custCtrl.customerProfilePanel">
<customer-profile></customer-profile>
</div>
</span>
But the problem is, when the control goes to either of "customer-profile" or "customer-list", the content of "customer" are gone. I want "customer" directive to act as the "master" and both of these directives should use the main "customer" template other than their respective html.
Related
Hi I am developing SPA application in Angularjs. This is my first application in Angularjs. I have two master pages. In first master page there is one tab when i click on that tab i want to redirect to another master page. I am using UI routing in Angularjs. I completed Login and registration modules but these modules should come in second master page but i have it in first master page now.
Below is my index.html first master page file.
<ul id="nav">
<li><a ui-sref="Registration.mainRegistration">{{ 'Registration' | translate }}</a></li>
<li><a ui-sref="Registration.Login">Login</a></li>
<li>{{ 'Careers' | translate }} </li>
<li>{{ 'Offers & Deals' | translate }} </li>
<li>{{ 'Financial' | translate }} </li>
This is the first page loads. There is one Financial tab in the above file. When i click on that tab all my above master page disappears and in that place new master page should come.
Below is my App.js
var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']);
app.config(function ($stateProvider,
$urlRouterProvider,
$translateProvider,
$translatePartialLoaderProvider) {
$stateProvider
.state('Registration', {
abstract: true,
url: '/Registration',
templateUrl: 'Registration/placeholder.html',
controller: 'MainRegistration'
});
//there are other states also.
I am in the initial stage of development. So May I know this can be achieved? Any help would be appreciated. Thank you.
Your state should not contain abstract: true. Abstract states are usually created when you want a parent view and create nested views.
var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router', 'toastr']);
app.config(function ($stateProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
$stateProvider
.state('registration', {
url: '/registration',
templateUrl: 'Registration/registration.html',
controller: 'RegistrationController'
})
.state('login', {
url: '/login',
templateUrl: 'Registration/login.html',
controller: 'LoginController'
});
Refer the states in ui-sref as below:
/All css,js and angular references.
<script src="ForgotPassword/ForgotPasswordController.js"></script>
<script src="ForgotPassword/ResetPasswordController.js"></script>
<script src="ForgotPassword/OTPVerificationController.js"></script>
<script src="ForgotPassword/ChangePasswordController.js"></script>
//header
<ul id="nav">
<li><a ui-sref="registration">{{ 'Registration' | translate }}</a></li>
<li><a ui-sref="login">Login</a></li>
<li>{{ 'Careers' | translate }} </li>
<li>{{ 'Offers & Deals' | translate }} </li>
<li>{{ 'Financial' | translate }} </li>
</ul>
<div ui-view></div>
//Footer
Create the registration.html and login.html under Registration folder. Create the controller files RegistrationController and LoginController
I have a problem with my code:
var app = angular.module( "myApp", ['ngRoute'] );
app.config( function ( $routeProvider ) {
$routeProvider
.when( '/home', { templateUrl: 'strony/home.html' } )
.when( '/about', { templateUrl: 'strony/about.html' } )
.when( '/contact', { templateUrl: 'strony/contact.html' } )
.otherwise( { redirectTo: '/this' } );
});
app.controller( 'MainCtrl', function ( $scope ) {
});
<div ng-controller="MainCtrl">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<div ng-view></div>
</div>
and i have three html positions in folder: 'strony'. If i click on link adress name is changing but on site nothing happenes. Can you help me with this?
I'm new to both ui router and angularjs. The problem I'm facing is -
In my header
<li ng-class="{active: $state.includes('settings')}" id="header01">
<a ui-sref="settings.personal"> <span id="header02" > Settings</span> </a>
</li>
In my main.js i have -
$stateProvider.state("settings",{
abstract: true,
url: '/Settings',
templateUrl: 'Settings/settings.html',
resolve: {
},
controller: ['$scope', '$state', 'contacts', 'utils',
]
});
$stateProvider.state("settings.personal",{
url:'/Personal',
controller: "settingPersonal",
templateUrl: "Settings/personal.html"
});
$stateProvider.state("settings.additional",{
url:'/Additional',
controller: "settingPersonal",
templateUrl: "Settings/Additional.html"
});
$stateProvider.state("settings.reset",{
url:'/ResetPass',
controller: "myCtrl2 as second",
templateUrl: "Settings/password_reset.html"
});
Now when i change from personal to any other tab, the settings in header becomes inactive. How to solve this.
Thank you.
One approach would be to use state.data, eg:
.state('settings', {
url: '/settings',
templateUrl: 'settings/settings.html',
data: {
pageTitle: 'Settings'
}
})
Then in your view you can access $state.current.data:
<li ng-class="{active: $state.current.data.pageTitle('Settings')}">
<a ui-sref="settings">Settings</a>
</li>
<li ng-class="{active: $state.current.data.pageTitle('About')}">
<a ui-sref="settings">About</a>
</li>
But personally, i'd probably put the nav items in an ng-repeat, and create the page title/class dynamically with state.data, to avoid hard coding page titles.
Say you have a basic router set up in Angular as follows:
app.config(function($routeProvider) {
$routeProvider.when('/', {
redirectTo: "/news"
}).when('/news', {
templateUrl: "partials/pages/news.html",
controller: "NewsCtrl"
}).when('/about', {
templateUrl: "partials/pages/about.html",
controller: "AboutCtrl"
})
});
And then you have an index.html that looks like:
<nav>
<ul>
<li>news</li>
<li>about</li>
</ul>
</nav>
<section ng-view></section>
What's the best way to add the .active class to the link corresponding to the route? Create a controller for the navigation? Use $rootScope? Etc. I'm having a problem with both those options, as neither seems very clean when I implement it.
I use next code:
<ul class="navigation">
<li ng-class="{active : (current == '/')}"><span>Articles</span></li>
<li ng-class="{active : (current == '/about')}"><span>About</span></li>
<li ng-class="{active : (current == '/contact')}"><span>Contact</span></li>
</ul>
In JS:
app.run(['$location', '$rootScope', function($location, $rootScope, $document) {
$rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
$rootScope.current = $location.path();
});
}]);
I am looking to show a block of HTML only when $state.current.name equals about.list. So far I have the following code but it doesn't seem to be toggling the element depending on the state.
index.html
<nav class="global-navigation">
<ul class="list">
<li class="list-item">
<a class="list-item-link" ui-sref="home">
Home
</a>
</li>
<li class="list-item">
<a class="list-item-link" ui-sref="about">
About
</a>
</li>
<li class="list-item" ng-show="$state.current.name == 'about.list'">
<a class="list-item-link" ui-sref="about.list">
List
</a>
</li>
</ul>
</nav>
app.js
var myApp = angular.module('myApp', ['ui.router'])
.config(['$urlRouterProvider', '$stateProvider',
function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/404.html');
$stateProvider.
// Home
state('home', {
url: '/',
templateUrl: 'partials/_home.html',
controller: 'homeCtrl'
}).
// About
state('about', {
url: '/about',
templateUrl: 'partials/_about.html',
controller: 'aboutCtrl'
}).
// About List
state('about.list', {
url: '/list',
controller: 'aboutCtrl',
templateUrl: 'partials/_about.list.html',
views: {
'list': { templateUrl: 'partials/_about.list.html' }
}
});
}]
);
You can use filters like isState or includedByState.
ng-if="'about.list' | isState" // exactly 'about.list'
ng-if="'about' | includedByState" // works for about and its children about.*
Or
JS
.run(function ($state,$rootScope) {
$rootScope.$state = $state;
})
HTML
data-ng-show="$state.includes('about.list')"
The view (html) doesn't know about the variable $state. It only knows the $scope that is associated with the view.
You can expose the $state variable on the $scope inside the controller that is associated with this view (you might have to inject $state into your controller as well):
$scope.uiRouterState = $state;
Then change the expression in your markup slightly:
<li class="list-item" ng-show="uiRouterState.current.name == 'about.list'">