When using ui-router, I setup states like so:
$stateProvider
.state 'product',
url: '/catalog/product',
templateUrl: 'app/product/product.html',
The only problem is, I have my controller in a directive, not as a stand-alone controller service. So how do I tell ui-router to hit my directive instead of the template?
Otherwise I'm not sure how to bind the template scope to the controller defined in my directive.
If you insist on Directive, as a target for your state template, the way would be :
$stateProvider
.state 'product',
url: '/catalog/product',
template: '<div here-is-my-directive-with-all-its-standard-settings></div>',
NOTE: there does not have to be controller explicitly defined for view at all. Just the HTML template will be injected into position in parent
And the directive:
.directive('hereIsMyDirectiveWithAllItsStandardSettings', ...)
Other words, the UI-Router is handling states, and injecting the template. The template contains directive, which can do what was designed for... as expected...
Related
I have the following usecase:
I have two views which are identical, as well as two controllers which are very similar. I intend to extend one controller with the other and just override the diff. The problem I am having is in ui-router I want to choose a controller by name (Since the templates is shared, and the controllers differ this cannot be declared in the template itself)
Before this refactoring I had the following code:
.state('edit-page-menu', {
url: '/sites/:siteId/page_menus/:menuId',
templateUrl: 'partials/edit-menu.html',
controller: ['$scope', '$stateParams', (scope, stateParams) => {
scope.siteId = stateParams.siteId
scope.menuId = stateParams.menuId
}]
})
Which adds the stateParams to the scope. In this usecase I had the controller defined in the template and could modify the scope that way. However now when I switch to controller by name approach
.state('edit-page-menu', {
url: '/sites/:siteId/menus/:menuId',
templateUrl: 'partials/edit-menu.html',
controller: 'editMenuCtrl'
})
I don't know how to inject / add the $stateParams to the controller. And I would really like to avoid injecting "$state" in the controller and fetch the parameters that way. Is there a way to modify the scope of a controller if you choose it by name?
Best regards.
I have an $routeProvider in my AngularJS which provides a templateUrl and controller,
I was wondering if it is possible to make the temlateUrl within the controller instead.
Reason for this is my code is partially async and this would easen the complexity.
You need to have a template defined for a route (AFAIK), but you could have the template be:
<div ng-include="actualTemplateUrl"></div>
And in the controller set the URL:
$scope.actualTemplateUrl = "/path/to/actual/template.html";
I have an app with a directive called fightcard. In my app configuration, I'm using ui-router to change the state. This code works...
$stateProvider
.state('matches', {
url: '/matches',
template: '<fightcard matches="matches"></fightcard>'
})
But... I was wondering if there is a property on state like controller to simply pass in the directive instead of an html template. I'd like to do something like this:
$stateProvider
.state('matches', {
url: '/matches',
directive: 'fightcard',
directiveModels: ['matches']
})
The html template option isn't that terrible - it may actually be superior - just wondering if there is an alternative in more "angular way" or perhaps the html template is the preferred approach. Each match has sub views for the best of games... probably it's better to have the directives contained a simple html templates like so:
$stateProvider
.state('matches', {
url: '/matches',
templateUrl: 'partials/matches.html'
})
.state('matches.games', {
url: '/games',
templateUrl: 'partials/games.html'
})
matches.html template
<fightcard matches="matches"></fightcard>
games.html template
<h6>BEST OF 5 GAMES</h6>
<div ng-repeat="gameModel in games">
<game gamemodel="gameModel" class="centerText"></game>
</div>
Putting the directive in a template is THE way to use the directive in AngularJS.
If you wanted to get fancy, you could extend .state() using the .decorator() method of $stateProvider to parse your special config and create that template for you, but it would really be a round-about way to go about using the directive.
I tried searching for this on various threads, but I can't conclusively understand this.
test.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',
{
controller:'SimpleController1',
templateUrl: 'partials/1.html'
})
.when('/xyz',
{
controller:'SimpleController1, SimpleController2',
templateUrl:'partials/2.html'
})
.otherwise({ redirectTo: '/'});
}]);
I tried doing the above snippet, but it's not working. Can I do something like this? If yes, then what is it that I'm doing wrong here?
Only one controller is allowed and will be assigned to the loading template as the controller in ng-view. No need to define ng-controller in the template for a main controller.
If you need to define multiple controllers I suggest you define one main/parent controller and use that in the routeProvider and then have others already in the template using the ng-controller directive.
or...
Check into using Angular UI's UI-Router : http://angular-ui.github.io/ which is a much more versatile router.
I have a route defined as
$routeProvider.when('/:culture/:gameKey/:gameId/closed', { templateUrl: '/templates/tradingclosed', controller: TradingClosedCtrl });
I would like angular to include the "culture" parameter when requesting the template somehow, so I can serve a translated template.
Is this possible?
If I'm reading this correctly you'd like to somehow use the culture parameter from the url route to determine which location to retrieve your template.
There may be a better way but this post describes retrieving the $routeParams inside a centralized controller with ng-include to dynamically load a view.
Something similar to this:
angular.module('myApp', []).
config(function ($routeProvider) {
$routeProvider.when('/:culture/:gameKey/:gameId/closed', {
templateUrl: '/templates/nav/urlRouter.html',
controller: 'RouteController'
});
});
function RouteController($scope, $routeParams) {
$scope.templateUrl = 'templates/tradingclosed/' + $routeParams.culture + '_template.html';
}
With this as your urlRouter.html:
<div ng-include src="templateUrl"></div>
You can define the controller you want to load in your views using ng-controller and access the $routeParams for the additional route parameters:
<div ng-controller="TradingClosedCtrl">
</div>
I've posted similar question with working Plnkr example of solution like #Gloopy suggested.
The reason why you can't implement that without ng-include is that routing is done in 'configuration' block, where you can't inject any values (you can read about these blocks in Modules documentation, section Module Loading & Dependencies
If you want not to introduce new scope, you can replace ng-include with my stripped version of ng-include directive, that do absolutely same that ng-include does, but do not create new scope: source of rawInclude directive
Hope that solution will satisfy your use case.