I have an AngularJS app and use the ui-router for routing. One of my pages has two similar sections with the same template and logic (so I hope they can use the same controller). The only difference between them is for example type property. Here is simplified fiddle of the page: http://jsfiddle.net/e_gluhotorenko/XeX59/7/.
So Is it possible to provide custom different data to the views's scopes ? Something like custom data in states but for views:
views: {
'section1' : {
templateUrl: 'section.html',
controller : 'ctrl',
data : { type: 'type1'}
},
'section2' : {
templateUrl: 'section.html',
controller : 'ctrl',
data : { type: 'type2'}
}
}
Or with ui-view directive like in ng-inclide's onload:
<div ui-view="section1" onload="type = 'type1'"></div>
<div ui-view="section2" onload="type = 'type2'"></div>
Just found out that ui-view actually has onload attribute, it is absent in documentation but is in API ref. So my example from the question works! fiddle
Did you try ng-init as in <div ui-view="section1" ng-init="type = 'type1'"></div>?
That should work, I would link the angular docs for ng-init, but the site seems to be down right now
Related
Using, Angular UI-Router, I have the following state:
$stateProvider
.state('blog.article', {
url: '/:slug',
template: '<article></article>',
views: {
}
});
I'm parsing the article slug in the url, which becomes available in $stateParams. However, I would like to target a parent state's named ui-view using this slug, is it possible to set the name of custom view to the slug in my case? So views object looks something like this:
views: {
'stateParams.slug': {/* etc */}
}
...However, I would like to target a parent state's named ui-view using this slug, is it possible to set the name of custom view to the slug in my case?
No. The views : {} setting is static, not dynamic.
But there are still dynamic parts like controllerProviders, templateProviders, resolvers etc. And you should think about handling your logic there
views: {
'viewName': {
templateProvider: ...
controllerProvider: ...
resolver: ...
}
}
see:
Angular and UI-Router, how to set a dynamic templateUrl
ControllerProvider in UI-router results in error
Angular ui.router reload parent templateProvider
Angularjs ui-router abstract state with resolve
I am novice to angularjs. i want to know that is there any way to render html template based on route inside div of other page. let me explain with an example.
/Employee/Add is route which show a add.html template to add new employee.
can i render this add.html or /Employee/Add route in other 'abc.html' page ??. i know we can use ng-include directive to render any html template. but i am looking based on route.
is that possible ??
You can do this using UI-router. Your basically creating a child state. Common use case is to create Tabs within a page. It would look something like this:
.state('league.games', {
url: '/games',
views: {
'tabContent': {
templateUrl: 'app/games/games.html',
controller: 'GamesCtrl',
controllerAs: 'vm',
resolve: {
initialData: ['$stateParams', 'gamesInitialDataService',
function($stateParams, gamesInitialDataService) {
return gamesInitialDataService.getData($stateParams.leagueId);
}]
}
}
}
})
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 would like to have a different template based on my scope.
Currently, I have only one template named : view-project.html accessible by this url : #/project/:id.
Now, I need two templates : view-project-1.html and view-project-2.html.
and I need them to keep the same url : #/project/:id
So for example, if my $scope.template = 1, I would like to use view-project-1.html with this url #/project/300. And if $scope.template = 2 I would like to use view-project-2.html with this url #/project/300
Is it possible to do that ?
app.config(function($routeProvider) {
$routeProvider
.when('/project/:id', {
templateUrl: 'template.html',
controller: 'projectcontroller'
})
});
Then in your controller:
app.controller('projectcontroller', function($scope) {
$scope.template = 2;
});
template.html:
<div ng-include="template==2?'view-project-2.html':'view-project-1.html'"></div>
DEMO PLUNKER
This, according to me, can be done in the following way :
Use ng-include to import both of your templates in the same file.
You can use ng-switch or ng-if to render one of the two templates based on the values in the route parameters.
I am using angular-ui-router to control my states in my AngularJS application. In one partial I use jquery-file-upload. The problem that I have is that when I use the example given by jquery-file-upload, is that it defines the controller in the template like this:
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST"
enctype="multipart/form-data" data-ng-app="demo"
data-ng-controller="DemoFileUploadController" data-file-upload="options"
data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
...
</form>
The form tag has data-ng-controller="DemoFileUploadController". In my controller this creates all the file upload methods needed (like $scope.submit() and $scope.queue)
The problem is that I define my controllers angular-ui-router style, like this in my app.js:
$stateProvider.state('upload', {
url: "/upload",
views: {
"upload": {
templateUrl: "app/partials/upload.html",
controller: 'DemoFileUploadController'
},
}
})
But this piece of code causes my file upload methods, not to be loaded (or bound) in my controller (there is no $scope.submit() and $scope.queue).
Is there a way I can use angular-ui-router and jquery-file-upload together?
My fix is to simply omit the controller when defining the state:
$stateProvider.state('upload', {
url: "/upload",
views: {
"upload": {
templateUrl: "app/partials/upload.html"
},
}
})
This way I assign the controller in my template (like in the example data-ng-controller="DemoFileUploadController"). I am still looking for a way to assign my controller via the stateProvider.