I have inherited a site and I am trying to complete a final part. On all other controllers I have added a variation of
$timeout(function(){ //Issue is this doesn't seem to timeout...
$scope.rTapTopNumbersContainer = document.getElementById('rtap-quote-summary');
rTapNotifyDOMChange($scope.rTapTopNumbersContainer);
}, 100);
but on this final controller I cannot seem to add this code anywhere in the controller without the angular code not working, or where I have it at the moment, timeout. I need the timeout to fire to then update the HTML DOM.
If I put it in .success the timeout doesn't seem to work. Where can I put this code or how can I call this code after the $http has fired?
app.controller('summary', ['$scope', '$http', function($scope, $http, $timeout) {
var init = function () {
$http({
method: 'GET',
url: $scope.api + 'sites/site/?title=' + $scope.site
}).
success(function(data, status, headers, config) {
...assign vars to scope etc...
$timeout(function(){ //Issue is this doesn't seem to timeout...
$scope.rTapTopNumbersContainer = document.getElementById('rtap-summary');
rTapNotifyDOMChange($scope.rTapTopNumbersContainer);
}, 100);
}).
error(function(data, status, headers, config) {
});
}
init();
}]);
Maybe you didn't import $timeout correctly?
app.controller('summary', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) { // twice
// 1. 2. 3. 1. 2. 3.
}]);
Related
I am working on angularjs (1.6) and want to made a functionality in angular service, its call when a controller call and its service have an ajax code like
app.service('myServ', function($http, $window){
this.backdoor=function(){
$http({
method : 'get',
url : 'web_services/backdoor.php'
}).then(function(res){
// console.log(res.data);
// console.log(res.data.length);
if(res.data.length==0)
{
$window.location.href="index.html";
}
});
}});
and my controller code is :
app.controller('myCtrl', function($scope, $http, $window, myServ, $routeParams){
myServ.backdoor();
});
so the above code (service) is check a user session is created or not, but the problem is when session is not created on server side then my html page load for a second then server will call $window.location.href so please help me about the right way to do this....
I believe you need a resolve in angular.config. Its job is to run some code before you are being redirected to your route/state (for ngRoute or ui.router).
To do that you would need to have:
app.service('myServ', function($http, $window){
this.backdoor=function(){
return $http({ // return the promise if you need to use the values in the controller
method : 'get',
url : 'web_services/backdoor.php'
}).then(function(res){
if(res.data.length==0){ $window.location.href="index.html"; }
else{ return res.data; } // return the values
});
}});
and main part:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/your_page/:route_params', {
templateUrl: 'your_page_partial.html',
controller: 'myCtrl',
resolve: {
resolvedVal: function resMyService(myServ, $routeParams){ // setting an injectable instance `resolvedVal`
/* use $routeParams values as parameters? */
return myServ.backdoor(); // calling your service
}
}}
);
}]);
Then it's enough to just inject your resolve into the controller:
app.controller('myCtrl', function($scope, $http, $window, resolvedVal){ // note: resolvedVal injection
$scope.my_data = resolvedVal;
});
I tried the $q service as follows but the browser still not waiting for the response. I already spent almost a day to figure out a solution, I also tried the $timeout.
login.controller("loginCtrl", ['$scope', '$rootScope', '$filter', '$window', '$http', 'APIService', 'localStorageService', 'doAlert', '$translate', '$q', '$timeout',
function ($scope, $rootScope, $filter, $window, $http, APIService, localStorageService, doAlert, $translate, $q, $timeout) {
$scope.isLogOut = true;
$(window).unload(function () {
$rootScope.$broadcast('onUnload');
});
$scope.$on('onUnload', function (e) {
var deferred = $q.defer();
$http.get(url).
success(function (data, status, headers, config) {
deferred.resolve(data);
}).
error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
});
Here is a sample where I use a callback to process data back from my utility
function get(url, callback, obj) {
$http.get(url, obj)
.then(function (response) {
callback(response.data);
}, function () {
notification.error(PLEASE_CONTACT_SYS_ADMIN);
});
}
I triggered the %a{"ng-click"=>"get_destinations(city)"}
However, it should redirect me to "destinations" controller, but it didn't
and there is no error in webconsole, what's going on ?
welcome.js.erb
var App = angular.module('App', ['ngRoute']);
App.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/depart_from/:id',
{
templateUrl: "<%= asset_path('promotion_destinations.html') %> ",
controller: 'destinations'
}
)
.otherwise({ redirectTo: '/depart_from/:id' });
}]);
App.controller("departure_cities", function($scope, $location, $http) {
$http.get("/promotion.json")
.success(function (response) {
$scope.departure_cities = response;
});
$scope.get_destinations = function(id) {
return $location.url("/depart_from/" + id);
};
});
App.controller("destinations", function($scope, $location, $http) {
$http.get("/another_city.json")
.success(function (response) {
$scope.destinations = response;
});
});
Your default controller is destinations in the $scope of destinations controller no any method like get_destinations .
Put your method in side destinations controller it will work if every thing is fine.
Well if you can link the html generated (the one that see the browser, not the server template) that would help.
However i still see an error for me in the HTML (or it's a naming problem)
get_destinations(city)
And in the javascript :
$scope.get_destinations = function(id)
Maybe you wanted to do this ?
get_destinations(city.id)
I am getting an error for this piece of controller, $http is not defined. Please tell me what's missing..
define(
['activityFeedTimeStamp' ],
function(app) {
app.register
.controller(
'timeStampController',
[
'$scope',
'$rootScope',
function($scope, $rootScope) {
$http.get('http://localhost:7001/ebiz/ebizdashboard/activityfeed/updatetimestamp').
success(function(data, status, headers, config) {
// $('#timeStampVal').html(data.lastacesstime);
$('#timeStampVal').html(hiiiiiiiii);
}).
error(function(data, status, headers, config) {
$("#timeStamp").hide();
});
}]);
});
Inject "$http" into the controller like so:
.controller(
'timeStampController',
[
'$scope',
'$rootScope',
'$http', // need to inject $http into controller
function($scope, $rootScope, $http) {
Basically, any service you use (be it defined by you or built-in Angular one like $http) needs to be injected into a controller to be used.
Since you're using the minify-friendly controller syntax (which lists injections in both an array and the function parameters), you'll need to add it in both places.
See documentation:
https://docs.angularjs.org/guide/di
(Specifically the section "Inline Array Annotation")
I have gone through the same problem when I was using
myApp.controller('mainController', ['$scope', function($scope,) {
//$http was not working in this
}]);
I have changed the above code to given below. Remember to include $http(2 times) as given below.
myApp.controller('mainController', ['$scope','$http', function($scope,$http) {
//$http is working in this
}]);
and It has worked well.
source : https://stackoverflow.com/a/22125671/2439715
You havent injected a $http service in controller
app.register
.controller(
'timeStampController',
[
'$scope',
'$rootScope',
'$http'
function($scope, $rootScope,$http) {
$http.get('http://localhost:7001/ebiz/ebizdashboard/activityfeed/updatetimestamp').
success(function(data, status, headers, config) {
// $('#timeStampVal').html(data.lastacesstime);
$('#timeStampVal').html(hiiiiiiiii);
}).
error(function(data, status, headers, config) {
$("#timeStamp").hide();
});
}]);
});
I'm developing a mobile app with Cordova and Angular JS. My app is on an easyphp localhost.
I use Angular Routes with a ng view directive in my index.html. And I've got this :
TypeError: Cannot read property 'get' of undefined
angular.module('app.controllers', [])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.status = "Accueil";
}])
.controller('ViewCtrl', ['$scope', function ($scope, $http) {
$http.get('mobile.php/getAnnonces/limit=10')
.success(function(data, status, headers, config) {
$scope.posts = data;
})
.error(function(data, status, headers, config) {
// log error
});
}])
...
If I test the URL my script returns JSON (with json_encode). Where am I wrong ?
Thanks for your help,
Regards
try to change
angular.module('app.controllers', [])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.status = "Accueil";
}])
.controller('ViewCtrl', ['$scope','$http', function ($scope, $http) {
$http.get('mobile.php/getAnnonces/limit=10')
.success(function(data, status, headers, config) {
$scope.posts = data;
})
.error(function(data, status, headers, config) {
// log error
});
}]);
Changes:
Passing $http service to controller as string so that will resolve at runtime.