How to use a angularjs route to call a javascript function - function

I'm trying to use the routing of angularjs to call a javascript function if a certain url is used.
The following code is not providing the expected result:
var app = angular.module('myApp', []);
app.config(function($routeProvider) {
$routeProvider.when('/link1', {
controller: 'PageController'
})
.when('/link2', {
controller: 'PageController'
})
.otherwise({
controller: 'PageController'
});
});
app.controller('PageController', function($scope, $routeParams) {
alert('1');
});
The alert(1); is not called if one of these URLs are requested...
Maybe someone knows how to solve this ?

Controller is not called until you specify template or templateUrl option in $routeProvider configuration. If there is no template needed, you could specify one-space char (but not empty string). Like so
$routeProvider.when('/link1', {
controller: 'PageController',
template: ' '
})

There is no way to associate the routing with a specific action in the controller. The routing in the AngularJS is not like the routing in other web frameworks to route to specific action of request. Instead, the routing in the AngularJS is primarily relating to handle the page flow and the controller defines the scope of the page.
However, if you put the alert in the controller like that, it should be triggered when the page is loaded. You need to check whether the URL you used is correct or not. To test, you can simply put $location.url('/link1') in your code.

If your controller is being used on a particular route, then you can call that function inside the controller. It will get executed once the route changes and your controller is called.
In this http://plnkr.co/edit/qUZ5Q7nKCRAS8dFvjRIg when you click on link1 it displays alert.
I can't quite catch why your code doesn't work as expected, but I created a similar app setup and it works:
var app = angular.module('myApp',[]).
config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/', {
controller: 'PageController',
template: '<br><br>this is page #/<br> {{data}}',
}).
when('/link1', {
controller: 'SpecificPageController',
template: '<br><br>this is page #/link1<br> {{data}}'
}).
when('/link2', {
controller: 'PageController',
template: '<br><br>this is page #/link2<br> {{data}}'
}).
otherwise({redirectTo:'/'});
}]).
controller('PageController', function($scope, $routeParams) {
$scope.data = 'hello world';
}).
controller('SpecificPageController', function($scope, $routeParams) {
$scope.data = 'hello specific';
alert(1);
});
Whenever SpecificPageController is assigned to a route, and that route opened, the alert function gets executed.

Related

how to change template in controller angularjs

I am trying to generate the template for the state in the dynamically with the controller as follows:
app.config( function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl:'homeView.html',
controller: 'homeController'
})
.state('review', {
url: '/pendingPaymentReview',
template: null,
templateProvider: function($stateParams){
return $stateParams.template;
},
controller: 'reviewController'
});
And then define the controllers as:
app.controller('reviewController', function ($scope, tempData, $stateParams) {
var template = tempData.getTemptlate();
$stateParams.template = template;
alert($stateParams.template);
tempData is a service that retrieves the page fragment from the server using $http.
My question is how do modify access and modify the template parameter of the review state? I have tried using $stateParams but got no display page. Any help will be more than appreciated.

Directive with js-call in the template - method does not get called

In my angular app, I have an alert-service, which handles the list of alerts. I then have a directive, which renders all the alerts to the page. I use the UI Bootstrap components.
However, the close button of the alert does not call the method:
.directive('someAlert', ['alertService', function (alertService){
var templateString = '<uib-alert ng-repeat="alert in vm.alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>';
return {
restrict: 'E',
template: templateString,
scope: true,
controller: function(){
var vm = this;
vm.alerts = alertService.get();
vm.closeAlert = function (index) {
console.log('closeAlert within directive controller called');
alertService.closeAlertIdx(index);
}
},
controllerAs: 'vm',
replace: true
}
}]);
Try this in the templateString
close="vm.closeAlert($index)"
I added a close method directly to the alert-instance. Then the alert.close() is working as expected. Nice solution found: alertservice and a slightly modified

Using Restangular to call to the Google Calendar API to grab the JSON file to inject the calendar events using Angular

angular.module('myapp', ['ngAnimate', 'ngTouch', 'restangular', 'ngRoute', 'ui.bootstrap'])
.config(function ($routeProvider, RestangularProvider) {
RestangularProvider.setBaseUrl('https://www.googleapis.com/calendar/v3/calendars/GoogleCalID#group.calendar.google.com/events?key=API KEY');
$routeProvider
.when('/', {
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
})
;
Trying to use the baseurl and then call it in the controller but unable to gain access to the JSON data when called in this way
angular.module('myapp')
.controller('MainCtrl', function (Restangular) {
Restangular.all("items").getList();
};
});
Any help on getting the request to not return on error would be greatly appreciated
Thanks
According to the docs, it looks as if the base URL for the Google Calender API is https://www.googleapis.com/calendar/v3.
So after updating your Restangular reference to the baseUrl, your calls would look something more like this.
Restangular.one('/users/me/calendarList').getList().then(function(calendarList) {
//Do something with calendarList
});
Or something similar. You would need to reference the docs for other valid endpoints.
If you need to send a query param with every request then you can use setDefaultRequestParams for that purpose.

Set angular directive attribute by calling function

I'm trying to set the value of a directive's attribute by calling a function on the containing page's controller, but it doesn't work as expected. In the code below, the "make" object does not have a "modelList" property, so I must place a separate call to the server to get it for each make.
<div ng-repeat="make in makeList">
<model-list-directive model-list="getModelList(make)" />
</div>
app.controller("myController",function($scope) {
$scope.getModelList = function(make) {
return null;
//return myService.getModelList(make);
};
})
app.directive("modelListDirective",function() {
restrict:'E',
scope: {
modelList: '='
},
template: '<ul><li ng-repeat="model in modelList">{{model.modelName}}</li></ul>',
controller: ['$scope', function ($scope) {
}]
If the getModelList() function is set to return null (not commented out in the code), no error is given, but the function is called multiple times (randomly varies between 3 and 5 usually).
The real problem comes when I invoke myService.getModelList(make) (commented out in the code). This results in an endless loop of calls to the service, which crashes the browser.
I'm guessing this is because of two-way binding, but I'm not sure.
Is there a better way to get dynamic data to the directive?
I think part of the problem is that your directive definition isn't returning an object. It should look like this:
app.directive('modelListDirective',function() {
return { // <-- need to return an object
restrict:'E',
scope: {
modelList: '='
},
template: '<ul><li ng-repeat="model in modelList">{{model.modelName}}</li></ul>',
controller: ['$scope', function ($scope) {
}]
};
});
However, you're passing a function as a 2-way binding into the directive, which you shouldn't do. See this answer to a similar issue.
What you can do instead is inject myService directly into your directive, then have your directive call myService.getModelList() in its link function.
So your markup would look like this:
<div ng-repeat="make in makeList">
<model-list-directive make="{{make}}" />
</div>
Each directive instance would just need the make.
And your directive definition would look like this:
app.directive('modelListDirective', ['myService', function(myService) {
return {
restrict:'E',
scope: {
make: '#'
},
link: function (scope, element, attrs) {
scope.modelList = myService.getModelList(scope.make);
},
template: '<ul><li ng-repeat="model in modelList">{{model.modelName}}</li></ul>',
controller: ['$scope', function ($scope) {
}]
};
}]);
setting scope.modelList in its link function.
Here's a fiddle.

Angularjs $resource and $http synchronous call?

I want write two services one with a $http.get method and one with $resource
This service should receive a Json Object and looks like this, at the moment this code is direct in my controller and not in a service:
var csvPromise= $http.get(base_url + 'DataSource/1').success(function(data) {
$scope.data4=JSON.stringify(data);
});
The problem is, I want save received data in $scope.data4 and I want use this data after the $http.get call but the value is empty.
Direct after this call there is and Object that needs this value:
new myObject($scope.data4)
so myObject must wait so long until the data has arrived.
or can I make a synchronous call with $http or $resource ?
How can i do this ? I have found so many examples with promise and .then but nothing has worked for me.
EDIT: I have now written a service but it didn`t work:
var test=angular.module('myApp.getCSV', ['ngResource']);
test.factory('getCSV',function($log, $http,$q, $resource){
return {
getData: function (id) {
var csvPromise= $http.get(base_url +'DataSource/'+id)
.success(function(data) {
return data;
});
return csvPromise;
}
}
});
and then in my controller I call this:
getCSV.getData(1).then(function(theData){
$scope.data4=JSON.stringify(theData);
new myObject( $scope.data4); });
but this did not work. I thought if the $http.get receives the data then the then Function is called.
I don't believe you can do synchronous calls. That said, you have at least two options:
1) Pass in the data using the $routeProvider resolve feature. From the documentation:
An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected
An example on how to use this:
$routeProvider
.when('/your/path', {
templateUrl: '/app/yourtemplate.html',
controller: 'yourController',
resolve: {
data: ['$route', '$http', function($route, $http) {
return $http.get(base_url +'DataSource/1');
}]
}
})
And then in your controller:
app.controller('yourController', ['$scope', 'data', function($scope, data) {
$scope.data4 = JSON.stringufy(data);
var yourObj = new myObject($scope.data4);
}]);
2) The second option is to use promises and only instantiate your new myObject($scope.data4) once the promise successfully completes.
Your code needs to be changed just a bit:
$scope.data4 = '';
var csvPromise= $http.get(base_url +'DataSource/1');
csvPromise.then(function(data){
$scope.data4 = JSON.stringify(data);
}, function(data){
//error handling should go here
window.alert(data);
});
This should give you what it sounds to me like you need.
As i know, there's no way to sync~ call the http or resource. They're hard coded on AngularJS core file :
xhr.open(method, url, true);
And you don't want to hurt your users too by blocking the browser wait the data arrived. You'll better show how you make the nothing has worked for me so we can start working to fix it.
Have you try call new myObject($scope.data4) inside success method?
$http.get(...).success(function(data){
$scope.data4 = JSON.stringify(data); // I've no idea why do you need this.
var stuff = new myObject($scope.data4); // THis is now your.
});