Pass Parameter to Angular Controller from Page - angularjs

I have a Web Page which has two controllers , First controller list the Ads
with Each Ad has AId which is display using {{x.AId}} . To Get the Ad Details in Next Div How to Pass {{x.AId}} to another controller on same Page ?
var app = angular.module("myModule", ['angularUtils.directives.dirPagination']);
//This Gets all the Classifieds
app.controller("GetClassifiedDetails", function ($scope, $http) {
$http({
url: "assets/services/MasterWebService.asmx/GetAdsList",
method: "GET"
}).then(function (response) {
console.log(response.data);
$scope.ListClassifieds = response.data;
$scope.TotalClassifieds = response.data.length;
});
});
app.controller("GetAdsVisitedStats", function ($scope, $http) {
$http({
url: "assets/services/MasterWebService.asmx/spAdsVisitStatis",
method: "GET",params: { AId }
}).then(function (response) {
console.log(response.data);
$scope.ListAdsVistedStats = response.data;
$scope.TotalAdsVisited = response.data.length;
});
});

Related

How to load a page to another page with angular js?

I've written about that function. But function successCallback does not work!
It empty html, but can not load response.
In fact, the page is loaded but html($compile(response)($scope)) does not work
how to load response in page?
Here is my code:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $compile) {
$scope.myFunction = function() {
$http({
method: 'post',
url: '/test-js.bc',
data: {
EndCityID: $(".EndCityID").val()
}
}).then(function successCallback(response) {
$(".airlinename").empty().html($compile(response)($scope));
},
function errorCallback(response) {});
}
});

$scope assignment works in one case but in other

First Case
angular.module('tss.application').controller("UserspaceController", function($scope, $http)
{
$http(
{
url : "/dirlist",
method : "GET",
}).then(function successCallback(response)
{
$scope.lists = response;
},
function errorCallback(response)
{
window.alert("Dir list could not be get");
});
});
Second Case
angular.module('tss.application').controller("UserspaceController", function ($scope, $http)
{
$http.get('dirlist').success(function(data)
{
$scope.lists = data;
});
});
I am very new to Angularjs so this could be a stupid questions. Anyway,
the assignment of lists variable works in second case but in first. That is, the second can access the values of "lists" inside the controllers. I failed to understand what is wrong with the first case?
angular.module('tss.application').controller("UserspaceController", function($scope, $http)
{
$http(
{
url : "/dirlist",
method : "GET",
}).then(function successCallback(response)
{
$scope.lists = response.data;
},
function errorCallback(response)
{
window.alert("Dir list could not be get");
});
});
put $scope.lists = response.data;, will work
Try this:
angular.module('tss.application').controller("UserspaceController", function($scope, $http)
{
$http(
{
url : "/dirlist",
method : "GET",
}).then(function successCallback(response)
{
$scope.lists = response.data;
},
function errorCallback(response)
{
window.alert("Dir list could not be get");
});
});
The deprecated success() method passes two separate values for data and headers, but the promise interface using .then() passes only a single response value which has the data and headers as attributes.
The change to your code is simply the line:
$scope.lists = response.data;

Ionic. Using $http giving error Cannot read property 'protocol' of undefined

This question is related to another one.
Before I did added $ionicPlatform, my service working just fine, but now there is something wrong with $http.
Here is example of injectables:
(function () {
"use strict";
angular.module('service', ['ionic'])
.service('BBNService', ["$http", "$localStorage", "$ionicPlatform",
function ($http, $localStorage, $ionicPlatform) {
And using of $http and $ionicPlatform
this.tips = function () {
var url;
$ionicPlatform.ready(function () {
if (window.Connection) {
if (navigator.connection.type == Connection.CELL_4G || navigator.connection.type == Connection.WIFI) {
if (this.getDayId = 0)//If Sunday - retrieve updated tips
url = this.host + "/tips/";
else
url = "data/tips.json";//If not - use saved data
}
}
});
var request = $http({
method: "GET",
url: url
}).then(
function mySucces(response) {
return response.data;
},
function myError(response) {
return response.data;
});
return request;
};
You need to send back the promise, doing a return response.data is not gonna work.
var deferred = $q.defer();
var request = $http({
method: "GET",
url: url
}).then(
function mySucces(response) {
deferred.resolve(response.data);
},
function myError(response) {
deferred.reject(response.data);
});
return deferred.promise;
And at the place where you consume this service:
BBNService.tips().then(
function(data) { //success call back with data },
function(data) { //error call back with data }
);
Please let me know if you need more explanation on using $q; always happy to give more details.

Web Api & Angular js

I am facing a problem while calling a service using $http.
I am opening an .aspx page using iframe and on the page load i want to call a service which i written in the controller but $http is taking full path of the page and then path of the web api service as shown below.
http://localhost:50802/TST00111CFG/app/DispatchNotify/api/DispatchNotifyService/GetWorkOrders
and i want in the below manner
http://localhost:50802/TST00111CFG/api/DispatchNotifyService/GetWorkOrders
My controller code is like this
dbSrvc.getDatFromService('api/DispatchNotifyService/GetWorkOrders', $scope.workOrder).then(function (result) {
debugger;
});
Please help me out in this.
dnApp.service('dbSrvc', ["$http", "$q", function ($http, $q) {
var getDataService = function (url, val) {
debugger;
var deferObj = $q.defer();
$http({
url: url,
method: 'Get',
data: val
}).then(function (data) {
deferObj.resolve(data);
});
return deferObj.promise;
};
var postDataService = function (url, val) {
debugger;
var deferObj = $q.defer();
$http({
url: url,
method: 'Post',
data: val
}).then(function (data) {
deferObj.resolve(data);
});
return deferObj.promise;
};
return {
getDatFromService: getDataService, //To Get Data From Service
postDataToService: postDataService //To Send Data and Retrieve from Service
}

Send data from one controller to a different controller in different ng-app

I have a controller 'searchCntr' with ng-app = 'homePage'. I want to send data using rootscope to a controller = "HashPageCntr" with ng-app set as 'HashPage'. Can i do this using rootscope? I am new to this. Thanks in advance
var app = angular.module('homePage',[]);
app.controller('searchCntr',function($scope,$http,$rootScope) {
$scope.searchHash =function () {
$http({
method: "POST",
data: {
"search": $scope.search
},
url: "/fetchHashes"
}).success(function (data) {
alert(data);
$rootScope.$broadcast('eventName',data);
window.location.assign("/goTohashPage");
});
}
});
// This is a different controller.
var app = angular.module('hashPage',[]);
app.controller('HashPageCntr',function($rootScope){
$rootScope.$on('eventName',function(event,data){
alert("In hash Page ");
alert(data);
});
});

Resources