How to call an angular $scope function using href in angular-kendojs - javascript

I am new to angular-kendo.js. I want to call a function emailClick() from href ie.
Email
and my controller and route is as follows :
app.controller('ContactCtrl', ['$rootScope', '$scope', 'appSvc',
function($scope, $rootScope, appSvc) {
$scope.emailClick = function() {
appSvc.selectItem = 'email';
appSvc.back = true;
$rootScope.go('email', 'slideLeft');
};
}]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
templateUrl : 'partials/home.html',
controller : 'HomeCtrl'
}).when('/email', {
templateUrl : 'partials/email.html',
controller : 'ContactCtrl'
}).otherwise({
templateUrl : 'partials/home.html',
controller : 'HomeCtrl'
});
}]);
}());
Now on clicking Email I should go to the function emailClick() but it is not happpening. there is no error and no response. Please help.
Thanks in advance.

you need to use ng-click directive,
Email

Related

Angularjs pass query parameter

Right now I'm calling below code :
http://localhost:8081/cgi/#/home
And it takes me to my home page.
My app.js is :
angular.module('myModule',
['ngRoute', 'ngCookies', 'ui.bootstrap',
'angularUtils.directives.dirPagination'])
.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/index', {
controller : 'homeController',
templateUrl : './app/views/index.html',
})
.when('/', {
controller : 'homeController',
templateUrl : './app/views/home.html'
})
.otherwise({
redirectTo : '/'
});
}])
Now I need to add extra parameter "debug", which I can store in my controller and if it is there I need to call some function.
I have tried adding below to my app.js
.when('/debug', {
controller : 'homeController',
templateUrl : './app/views/home.html',
})
and below line to my controller
$scope.debug = $routeParams.debug === 'true' ? true : false;
console.log($scope.debug);
in my controller :
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route) {
$scope.debug = $routeParams.debug === 'true' ? true : false;
console.log($scope.debug);
}
Also please include url you think would work in answer as I can understand from where to start looking for either routeProvider or $location functionality
But page has now stopped loading and I don't have any clue how can I make it work.
Please help
You need to inject the $routeParams service to the controller. Just add it as a parameter to the controller function.
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route, $routeParams) {
$scope.debug = $routeParams.debug === 'true' ? true : false;
console.log($scope.debug);
}
--- Update ---
Path
Use $location.path() === '/debug' to check if the current path is '/debug'. You need to inject the $location service.
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route, $location) {
$scope.debug = $location.path() === '/debug';
console.log($scope.debug);
}
Query Param
This will allow you to check if there is a query parameter keyed "debug" with the value of "true".
http://localhost:8081/cgi/#/home?debug=true
 
var app = angular.module('myModule');
app.controller('homeController', function($scope, $http, $route, $location) {
$scope.debug = $location.search().debug;
console.log($scope.debug);
}

How do I pass parameters to the controller in $routeProvider?

I am new to Angular.js ....Based on the id, the fullPostController gets the required data using $http, but how am I supposed to pass the postId to the controller?
'use strict';
var myAPP = angular.module('myAPP', [ 'ngRoute' ]);
myAPP.config(['$routeProvider',
function (
$routeProvider
) {
$routeProvider.
when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
}).
when('/post/:postId', {
templateUrl: 'pages/full_post.html',
controller: 'fullPostController'
}).
otherwise({
redirectTo: '/'
});
}]);
How do I pass the postId to fullPostController??
inject $routeParams in the controller, the post id is $routeParams.postId

`$scope` data not rendering

By default, I am having a message in my scope. when i call my login page, i am not getting the message in the html.
i don't know what i miss here, any one figure-out please?
my app.js:
'use strict';
angular.module('myNewApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/login', {
templateUrl : 'js/scripts/views/login.html',
controller: 'js/scripts/controllers/loginCont.js'
})
.when('/register', {
controller: 'controllers/userRegisterCont.js'
})
.otherwise({
redirectTo: '/login'
});
$locationProvider.html5Mode('true');
}])
my lognCont.js :
'use strict';
angular.module('myNewApp')
.controller('loginCont', ['$scope', function ($scope) {
$scope.message = "Welcome";
}]);
my login html :
<h1>I am login here! {{message}}</h1>
what else missing here? any one help me
since i use html5 support still the url is with # http://localhost:3000/#/login
You need to pass the name of the registered controller as a String, or the controller function by itself.
So this:
.when('/login', {
templateUrl : 'js/scripts/views/login.html',
controller: 'loginCont'
})
should work

$location is not working in Angular

I have an rest api, in which the api is sending instruction to redirect (301 is being sent).
And I have my angular js code like this:
var request = $http.post(LOGIN_URL,{username:'tes',password:'test'})
request.success(function(html)
{
if(html.failure) {
console.log("failure")
$scope.errorMessage = html.failure.message
}
else {
console.log("Success here....")
$location.path("route")
}
})
I can see in the browser log that it is coming in the else part ( Success here..... is being printed). But the url is not changed. $location.path doesnt do anything; I have also tried $location.url which also results the same thing.
And also I'm injecting the $location to my controller.
Where I'm making mistake?
Thanks in advance.
Try something like this
$location.path("/myroute")
You have to have a ng-view on the page as well.
Also make sure you have a corresponding view with that name
and when you're registering your controller you have the '$location' var being injected in the declaration of your controller like this example:
controllers.controller('MyCtrl', ['$scope', '$route', '$location', 'MYService',
function($scope, $route, $location, MyService) {
// ... controller code
}])
also you might want to debug your route changing to see what is happening with a location change listener, like in this example:
return app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'MyCtrl'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: 'LoginCtrl'
}).
when('/error/:errorId', {
templateUrl: 'partials/error.html',
controller: 'ErrorCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]).run(function($rootScope, $injector, $location) {
$rootScope.$on("$locationChangeStart", function(event, next, current) {
console.log('current=' + current.toString());
console.log('next=' + next.toString());
});
});
});

$routeParams Empty on $locationChangeSuccess

I configure my app in the following run block. Basically I want to preform an action that requires me to know the $routeParams every $locationChangeSuccess.
However $routeParams is empty at this point! Are there any work rounds? What's going on?
app.run(['$routeParams', function ($routeParams) {
$rootScope.$on("$locationChangeSuccess", function () {
console.log($routeParams);
});
}]);
UPDATE
function configureApp(app, user) {
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/rentroll', {
templateUrl: 'rent-roll/rent-roll.html',
controller: 'pwRentRollCtrl'
}).
when('/bill', {
templateUrl: 'bill/bill/bill.html',
controller: 'pwBillCtrl'
}).
when('/fileroom', {
templateUrl: 'file-room/file-room/file-room.html',
controller: 'pwFileRoomCtrl'
}).
when('/estate-creator', {
templateUrl: 'estate/creator.html'
}).
when('/estate-manager', {
templateUrl: 'estate/manager.html',
controller: 'pwEstateManagerCtrl'
}).
when('/welcomepage', {
templateURL: 'welcome-page/welcome-page.html',
controller: 'welcomePageCtrl'
}).
otherwise({
redirectTo: '/welcomepage'
});
}]);
app.run(['$rootScope', '$routeParams', 'pwCurrentEstate','pwToolbar', function ($rootScope, $routeParams, pwCurrentEstate, pwToolbar) {
$rootScope.user = user;
$rootScope.$on("$locationChangeSuccess", function () {
pwToolbar.reset();
console.log($routeParams);
});
}]);
}
Accessing URL:
http://localhost:8080/landlord/#/rentroll?landlord-account-id=ahlwcm9wZXJ0eS1tYW5hZ2VtZW50LXN1aXRlchwLEg9MYW5kbG9yZEFjY291bnQYgICAgICAgAoM&billing-month=2014-06
this worked for me, inside your run callback:
.run(function($rootScope, $routeParams, $location) {
$rootScope.$on("$locationChangeSuccess", function() {
var params = $location.search();
console.log(params);
console.log('landlord-account-id:', params['landlord-account-id']);
console.log('billing-month', params['billing-month']);
});
})
By accessing /rentroll you will get empty $routeParams because your $routeProvider
configuration for that path is not expecting any variable on URL.
$routeParams is used for getting variable value of your URL. For example :
$routeProvider
.when('/rentroll/:variable', {...});
and access it on /rentroll/something will give you $routeParams as below :
$routeParams.variable == 'something';
https://docs.angularjs.org/api/ngRoute/service/$routeParams
Explains a bit about when the $routeParams are available and why.
To solution here might be to use $route.current.params

Categories