I have a page add recommendation and same page for the edit recommendation when I click on the add recommendation the recommendation Id is null in the URL, but when I go the page by clicking the recommendation link it will show that respective Id for the recommendation, in URL it is showing but how to get that Id from the URL to use it.
My code is:
.state('Admin.AddRecommendation',{
url: "/AddRecommendation/:recoId",
templateUrl: "views/AddRecommendation.html",
params: {recoId:null},
})
controller.js:
$scope.addRecommendation = function(){
var id = $routeParams.recoId;
console.log(id);
So where I am doing it wrong.
Thanks
As you are defining recoId in the url, you don't need params: {recoId:null},
.state('Admin.AddRecommendation',{
url: "/AddRecommendation/:recoId",
templateUrl: "views/AddRecommendation.html"
})
You can access the params in the controller by injecting $stateParams
app.controller('MyController', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams) {
$scope.addRecommendation = function(){
var id = $stateParams.recoId;
console.log(id);
}
}]);
If you are using components, $stateParams is deprecated in favor of $transition$
However, it is not as straightforward to implement that: https://github.com/angular-ui/ui-router/issues/3110#issuecomment-271101827
Basically, you can use it as
.component('foo', {
bindings: { $transition$: '<' },
controller: MyController,
controllerAs: 'vm'
});
app.controller('MyController', ['$scope', '$state', function($scope, $state) {
var vm = this;
$scope.addRecommendation = function(){
var id = vm.$transition$.params().recoId;
console.log(id);
}
}]);
To get the query params from the URL when using ui-router, you can use
In your controller.js:
$state.params
This will give you all the params in the URL. To get specific param:
$state.params[<your-query-param>]
EDIT: In your question, instead of $routeParams, use $state
Related
In a form for an AngularJS page, is it possible to use the following URL to be set for a method?
https://example.com/transaction-address/id3
I've tried doing this, but the email id I've set is not being passed. The form is being handled in the injected script and the problem (or maybe a mistake) is in the line that injects the 'id3' method.
In the script for the ng-app, I've set the 'id3' method:
angular.module('app', [])
.factory('Account', function($q, $u, $sce) {
$q.all([
['$http',
{'id1': 1,
'id2': 2,
'id3': 3,
'id4': 4,}
]).then(function (response) {
var sl = 'id3';
$sce.trustAsResource('id3', sl);
response.end();
});
});
You don’t need to automatize the id3 string here. Just assign it to a variable:
angular.module('app', [])
.factory('Account', function($q, $u, $sce) {
$q.all([
['$http',
{'id1': 1,
'id2': 2,
'id3': 3,
'id4': 4,}
]).then(function (response) {
var sl = 'id3';
response.sendValue(sl);
})
});
So, i've searched for an answer to this problem and the solutions presented on the other questions won't work. To be honest i'm already on the testing every possibility.
I have a loopback app with angular and connected to mySQL database.
The explorer from loopback works and i can get and post data to the db.
The problem comes when i try to retrieve it with angularjs on a controller.
what i have is this:
app.js:
angular
.module('app', [
'ui.router',
'lbServices'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
$urlRouterProvider) {
$stateProvider
.state('weddings', {
url: '',
templateUrl: 'views/Weddings.html',
controller: 'WeddingsController',
})
.state('Calendar', {
url: '/Calendar',
templateUrl: 'views/Calendar.html',
controller: 'CalendarController',
});
$urlRouterProvider.otherwise('weddings');
}]);
Weddings.js:
angular.module('app').controller('WeddingsController', ['$scope', '$state',
'$http', 'weddings', function($scope, $state, $http, weddings) {
$scope.temp = [];
function getWeddings() {
weddings.find().$promise
.then(function(results) {
$scope.temp = results;
},
function(err) {
$scope.requestsError = err.statusText;
}
);
}
getWeddings();
}]);
That gives me : [$injector:unpr] Unknown provider: weddingsProvider <- weddings <- WeddingsController
if someone can spot something wrong please enlighten me.
Ps: the injections might be too much, im just putting them all out there to see if works :/
This is the first time I use AngularJs and I would really appreciate some help on this.
I have a json file from which I am retrieving some content that gets displayed on my html template. So far so good.
I need to assign an http response data to the scope from the html.
This is my app
var myApp = angular.module('myApp', ['ngMessages']);
myApp.controller('mainController', ['$scope', '$filter', '$http', '$log', function($scope, $filter, $http, $log) {
$scope.url = "myurl";
$http.get($scope.url)
.success(function(result) {
$scope.page = result;
})
.error(function(data, status) {
$log.info(data);
});
$scope.$watch('productId', function () {
$log.info($scope.productId);
});
}]);
And this is the html
<div class="page" ng-controller="mainController">
<div id="content" class="chapter">
<h1>The Icons Update</h1>
<div ng-init="productId = page[0].acf.spotlight_on"></div>
<p>{{ page[0].acf.spotlight_on_title }}</p>
<p>{{ page[0].acf.spotlight_on_paragraph }}</p>
<img src="{{ page[0].acf.stylist_picture }}" />
</div>
</div>
I need to assign to productId the value of page[0].acf.spotlight_on but need to do it from the html. I just get an undefined value.
Am I right to use ng-init on a div or should I use a different approach? Is there a different way to achieve what I need?
My understanding is that ng-init cannot be used to set scope values after a promise is resolved, which is what is happening when the value is set from $http.get. See angular docs for ngInit https://docs.angularjs.org/api/ng/directive/ngInit
In your question you say you need to set the value of productId in the html, however this appears impossible where it is returned by a promise.
The alternative is very simple to do in the controller by simply using the following:
var myApp = angular.module('myApp', ['ngMessages']);
myApp.controller('mainController',
['$scope', '$filter', '$http', '$log',
function($scope, $filter, $http, $log) {
$scope.page = {};
$scope.productId = '';
$scope.url = "myurl";
$http.get($scope.url)
.success(function(result) {
$scope.page = result;
// set the value of productId from the result
$scope.productId = result[0].acf.spotlight_on;
})
.error(function(data, status) {
$log.info(data);
});
}]);
If you use ng-init, then it creates a scope variable which is only limited to the element(and its children) where you have defined it. In other words, it won't be available in your controller which is why you get 'undefined'.
To tackle this, you can use $parent, which will create the scope variable in your controller:
ng-init="$parent.productId = page[0].acf.spotlight_on"
I'd like to filter the JSON being displayed by the route param provided. I have a list page which displays all of the json data and a detail page which I would like to just display the json matching the id in the routeparam.
This is my service:
app.factory("HC", ["$resource", function($resource) {
return {
API: $resource('/api/hc')
}
}]);
This is my controller which is working for displaying all of the results. How could I filter these by the requestParams?
app.controller('servicesDetail', ['$scope', 'HC', '$resource', '$routeParams', function ($scope, HC, $resource, $routeParams ) {
HC.API.query(function(results) {
$scope.services = results;
});
$scope.services = []
}]);
And here are my routes
.when('/services', {
templateUrl: 'templates/services.html',
controller: 'servicesController'
})
.when('/services/:serviceId', {
templateUrl: 'templates/servicedetail.html',
controller: 'servicesDetail'
})
Your json is not valid but in case it has format like that :
{ "_id" : "53bc36b8b7bbbf77208dec62", "name" : "this is from the client", "__v" : 0 }
you can use filterFilter service please see demo here http://jsbin.com/somob/1/edit?html,js,output
but the best option is send serviceId to server and get a single service from server instead array of services and filter them after
app.controller('servicesDetail', ['$scope', 'HC', '$resource', '$routeParams', 'filterFilter',
function ($scope, HC, $resource, $routeParams, filterFilter) {
$scope.services = [];
HC.API.query(function (results) {
$scope.services = results;
});
$scope.serviceId = $routeParams.serviceId;
$scope.serviceById = filterFilter($scope.services, {
_id: $routeParams.serviceId
});
}]);
html:
<!--just for testing -->
<p>ServiceId : {{serviceId }}</p>
<pre>{{serviceById |json}}</pre>
I'm using a clone of https://github.com/angular/angular-seed to make a simple Angular.js app. I'm trying to put in some properties to the controllers in order to bind them in my HTML but keep getting errors messages that I can't seem to figure out.
My controllers.js file looks like this currently:
'use strict';
/* Controllers */
angular.module('myApp.controllers', []).
controller('MyCtrl1', [function($scope) {
$scope.names = 'bob'
}])
.controller('MyCtrl2', [function() {
}]);
Here is the app.js too if it helps:
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
I've used the default name for the app "myApp" and have also called the ng-view within my HTML. When MyCtrl1 is in use I continually get this error:
TypeError: Cannot set property 'names' of undefined
Is there something syntactically wrong here? I've tried to only modify controllers.js to avoid having issues so there shouldn't be problems elsewhere...
Controllers has a few overloads, you can either simplify your code to this:
angular.module('myApp.controllers', []).
controller('MyCtrl1', function($scope) {
$scope.names = 'bob'
})
.controller('MyCtrl2', function() {
});
Or let Angular know what $scope is like this:
angular.module('myApp.controllers', []).
controller('MyCtrl1', ['$scope', function($scope) {
$scope.names = 'bob'
}])
.controller('MyCtrl2', [function() {
}]);
Reference: http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller