I'm using the following to do paging in my datagrid:
$location.search('page', page);
where page is the current page number.
Then I listen to the following event:
$scope.$on('$routeUpdate', function(next, current) {
$scope.currentPage = $routeParams.page ? Number($routeParams.page) : 1;
$scope.search();
});
That triggers a call to a search() method on my scope after updating the currentPage that is in the URL.
How would I translate that to states with ui-router ? The $routeUpdate is no longer triggered since I'm using a state manager instead of routes.
My route is now defined in the state provider as such:
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
})
I ended up listening to the $locationChangeSuccess event instead and that solved it.
I would try to use the controller (mandatsCtrl in your example) to put that logic. the view controller will be called with every parameter change, and you could inject the $stateParams into it to get the page #
other similar option to explore is the view controllers which is what I've used at some point
last, since $stateParams is injectable, you might want to inject it to your custom-built directive and use it there straight
Related
I have 2 controllers, I want to have next thing:
when I click on item in controllerOne it should highlight element with the same ID in controllerTwo.
I have highlighting method But how to send event with ID from controllerOne to controllerTwo ??
Keep the shared data in a service that's accessible from both controllers, see https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#defer-controller-logic-to-services
Use $route to pass variables in the URL:
/controller2route/:action/:id
for example:
/details/highlight/2
You can then use ifs and switches to call the appropriate function, for example highlight(2) for the above URL.
https://docs.angularjs.org/api/ngRoute/service/$route
You can you route parameter in routing.
In routing
app.config(function($routeProvider) {
$routeProvider
.when("/users/:userId", {
templateUrl : "main.htm",
controller:"controllerTwo "
})
})
and in controllerTwo use $routeParams to get the user id.
app.controller('controllerTwo',function($scope,$routeParams){
var userId = $routeParams.userId;
})
and the one better solution is to use services. Here is the link
https://thinkster.io/a-better-way-to-learn-angularjs/services
I have an odd issue where I use an ng-click to $state.go() to a state, and get the correct url but the wrong template and controller.
These are my states:
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/messages");
$stateProvider.state('message', {
url: "/messages/:to/:fro/:messageID",
templateUrl: 'message.html',
controller: 'MessageCtrl'
}).state('compose', {
url: "/messages/compose/a/message",
templateUrl: 'compose.html',
controller: 'ComposeCtrl'
});
});
This is the function triggered by my ng-click and I am in fact getting the console log so I know the right one is firing.
$scope.composeMe = function(){
console.log("You want to compose a message!");
$state.go("compose");
};
When I fire that function I get the url to change to http://example.com/messages/compose/a/message but I get the templateUrl and the controller of the message state.
Why is that? The other state is fired from a similar (ng-click derived) function and works perfectly.
The URL you are trying to go to matches the one you are actually going to.
How would ui-router know that "compose" isn't the to: field you want, "a" isn't the fro: field you want, and "message" isn't the messageID you want?
Move the more specific state definition above the one with URL parameters.
I'm using UI-Router for AngularJS and here is the question - at the moment when I'm clicking a link which sends me to specific state (using ui-sref) I want to send AJAX request to back end, get data, and render them in the template related to this new state. To which event should I listen for making AJAX request? Could you please give me a code example for this listener? I understand that the question seems to be simple, but I'm new in AngularJS world.
Thank you.
Have a look at the resolve property on your state configuration. See ui-router wiki
Then inject the resolved property as a dependency of the controller.
Example:
$stateProvider.state('about', {
templateUrl: 'about.html',
controller: 'AboutController',
resolve: {
something: function ($http) {
// make ajax request
return $http.get(...).then(function (response) {
return response.data;
});
}
}
})
In the controller, we inject the data that will be resolved, i.e. something :
app.controller('AboutController', function (..., something, ...) {
// The data resolved by ui-router is ready when the controller is instantiated
}
In my index.html <head> I have the following element:
<link
rel="alternate"
type="application/rss+xml"
title="{{feedJobsTagName}} jobs feed"
href="{{feedJobTagsUrl}}"
ng-if="feedJobTagsUrl">
When I change routes to a new tag, I have a resolver that fetches the tag and updates the two properties on the root scope (TagShowCtrl):
$rootScope.feedJobTagsUrl = '/feeds/jobs/'+tag.type+'s/'+tag.nameLower;
$rootScope.feedJobsTagName = tag.name;
If I refresh the page, I get the correct tag name, however if I just change routes by following links to a new tag name it seems to cache the first name and not update it with the new one:
.when('/tags/:slug/:id', {
templateUrl: 'partials/tags/show',
controller: 'TagShowCtrl',
resolve: {
tag: ['$route', 'Tag', function($route, Tag){
return Tag.get({ id: $route.current.params.id}).$promise;
}]
}
})
To make your changes apply to the view, you have to bind the $routeChangeSuccess event on the $scope of your controller.
$scope.$on('$routeChangeSuccess', function(next, current) {
$rootScope.feedJobTagName = "new value";
});
Please mind that it won't work correctly on $rootScope inside your controller.
Although your controller's scope is updated, the changes won't apply to the view, because your route's resolve object returns a promise. (See what happens exactly here)
As for all asynchronous tasks, you either need to $apply the changes to the digest loop or use the events provided by Angular - which is in your case $routeChangeSuccess.
Mind that the controller is instantiated after the asyncronous get promise has been fulfilled.
I've seen this and this but it seems like there might be a simpler way.
In my view I have several menu options that are controlled through permissioning - i.e., not everyone can see a "Dashboard" view. So in my menu option in my view I have something like the following:
<li ng-show="validatePermission('Dashboard')">Dashboard</li>
In my controller I have a validatePermission method defined where it is looking at the permissions of the current user. For example:
$scope.validatePermission = function(objectName) {
if $scope.allPermissions......
Also in my controller I'm loading those permissions via an $http call:
$http.get('permissions/' + userid + '.json').success(function(data) {
$scope.allPermissions = data;....
The issue is that $scope.allPermissions doesn't get loaded before the view makes the call to validatePermission. How can I wait for allPermissions to be loaded before the view renders?
You ask:
How can I wait for allPermissions to be loaded before the view renders?
To prevent the entire view from rendering, you must use resolve. You don't have to use the promise library though, since $http returns a promise:
var app = angular.module('app');
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'template.html',
controller : 'MyCtrl',
resolve : MyCtrl.resolve
});
});
function MyCtrl ($scope, myHttpResponse) {
// controller logic
}
MyCtrl.resolve = {
myHttpResponse : function($http) {
return $http({
method: 'GET',
url: 'http://example.com'
})
.success(function(data, status) {
// Probably no need to do anything here.
})
.error(function(data, status){
// Maybe add an error message to a service here.
// In this case your $http promise was rejected automatically and the view won't render.
});
}
}
But if you simply want to hide the dashboard <li>, then do as Joe Gauterin suggested. Here's a very simple example plunkr if you need it.
Have the validatedPermission function return false when allPermissions hasn't been loaded. That way the element with your ng-show won't be displayed until allPermissions has been loaded.
Alternatively, put an ng-show="allPermissions" on the enclosing <ul> or <ol>.
You can also specify on your routecontroller a resolve object that will wait for that object to resolve prior to rendering that route.
From the angular docs: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
resolve - {Object.=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $routeChangeSuccess event is fired. The map object is:
key – {string}: a name of a dependency to be injected into the controller.
factory - {string|function}: If string then it is an alias for a service. Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before its value is injected into the controller.
A google group reference as well: https://groups.google.com/forum/#!topic/angular/QtO8QoxSjYw
I encountered an similar situation, you might also want to take a quick look at
http://docs.angularjs.org/api/ng/directive/ngCloak
if you're still seeing a "flicker" effect.
As per the angularjs documentation:
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
Wrapping the code in ng-if fixed the issue for me:
<div ng-if="dependentObject">
<!-- code for dependentObject goes here -->
</div>