I am having a weird issue with location.path(),as I don't get redirected to the page I want.
I have a link in my HTML file as follow:
<a title="{{woa.name}}" href="#/" ng-right-click="" href="javascript:void(0)" ng-click="goToDetailPage(woa.pk,'workofart')">
The corresponding controller has the following code:
appTreasure.controller("mySecondController", function($scope, $http, $location) {
$scope.goToDetailPage = function(pk, selectedDetailsPage) {
newLocation = selectedDetailsPage + '/' + pk;
console.log("NEW: " + newLocation);
$location.path(newLocation);
}
// some more unrelated code
The current URL is: <base>/#/beinspiredby and the printed newLocation is something like <base>/#/workofart/someexistingpk. So, I am building the new location with valid values.
Unfortunately, when I click on the link, I get redirected to <base>/#/.
If I manually go to <base>/#/workofart/someexistingpk I correctly land to the page I am looking for.
Furthermore, in a third controller, I have exactly the same code for goToDetailPage and it works.
Where am I missing something?
I think is it because you have an href attribute in your anchor element (actually you have two).
Try this
<a title="{{woa.name}}" ng-right-click="" ng-click="goToDetailPage(woa.pk,'workofart')">
Related
I need to create multiple <a ng-click="controller.doThat(X)"> elemets, based on a response from some $http call. And add them to an element designated by its id attribute.
I am using AngularJs v1.6.4. Please help.
var newElem = $compile(t)($scope);
document.getElementById("designatedDiv").appendChild(newElem[0]);
does the job as long as t is a string of a single element:
var t = "try and press <a ng-click=\"controller.doThat(X)\">here</a> and see..."
will result in:
Error: [jqLite:nosel] http://errors.angularjs.org/1.6.4/jqLite/nosel
at angular.min.js:6
BUT if you redo the last example as following:
var t = "<span>try and press </span><a ng-click=\"controller.doThat(X)\">here</a><span> and see...</span>"
var newElem = $compile(t)($scope);
for (i=0;i<newElem.length;i++)
document.getElementById("designatedDiv").appendChild(newElem[i]);
then it works as expected.
I need to mark part of the text as a link. Something like:
"Please log in with your email...". This text must be localized later.
I need that "log in" part to be the link.
When I do something like this in the render method:
var link = React.DOM.a({
href: this.makeHref('login')
},
'log in'
);// or React.createElement or
//var link = <a href={this.makeHref('login')}>
// 'log in'</a>;
<div>{'Please '+ link + ' with your email...'}</div>
It will output:
Please `[object Object]` with your email...
Without surround text, I receive the expected result. In other words: How to make react render HTML not object.
This is a simplified example - I need to insert link text with format marker {0} like in C# - or any other working solution.
Thank you for help!
If you want to use an element within another element, just use curly braces like so:
var Component = React.createClass({
render: function() {
var link = <a href={this.makeHref('login')}>log in</a>;
return <div>Please {link} with your email.</div>;
}
};
You can see a working fiddle here: https://jsfiddle.net/jrunning/fencjn4x/
If you're going to be internationalizing your app at some point in the future I recommend a) crossing that bridge when you come to it, and b) using a solution like React Intl instead of trying to build your own solution with string concatenation.
Im trying to accessing a value in a querystring.
Here's what i see in the browser:
http://localhost:1010/products/chairs.html?searchMe=testing123
And in my Controller, i have:
var mySearchMeQuery = $location.search().searchMe;
console.log("searchMe = " + mySearchMeQuery );
In my console.log, i am seeing: searchMe = undefined
I have checked i have $location injected in my controller.
** Solution must work in IE8+ **
$location works only if you use path with hash (#). See this.
Use $location.search()
It returns an object key-value pairs; The key is your query string and the value is the query string value.
Example:
function MainCtrl($scope, $location) {
$scope.queryString = $location.search();
// returns {searchMe: "testing123"}
}
And if you want to print the same message as in your question
console.log("searchMe = " + $location.search().searchMe);
You can inject dependecy $routeParams and get the parameter value using something like this:
$routeParams.searchMe
Docs on routeParams
UPDATED Answer:
I have updated an existing fiddle which had $routeParams as an example. If you click on Moby link and check console over there you can see that SearchMe as a querystring is available.
Fiddle
Using ui-router. take a look at this.
starting with this in the controller:
$scope.transitionResponse = {};
$scope.hello= "world";
transition.makeTransitionCashOutCall(strippedUrl).then(function(response){
//nested view will need this to build out layout
$scope.transitionResponse.OnlineDistributionProcessUrl = response.data.OnlineDistributionProcessUrl;
console.log(response);
console.log($scope.transitionResponse.OnlineDistributionProcessUrl);
if(!response.data.OnlineDistributionProcess){
$scope.showDocument(transitionType);
}else{
//display phone no. if no url
$state.go('rollover-options.cashout-info');
//display url if it exists (same view ^)
}
});
The console.log for $scope.transitionResponse.OnlineDistributionProcessUrl is giving me correct value. But as soon as I drill down to another state the value is lost and i get undefined on console.logs or alerts. What is going on? really? Why is the value set getting lost? I can access hard coded values like $scope.hello fine with {{hello}} in the cashout-info view. But the other value is getting lost. I'm really lost here.
u have not declared OnlineDistributionProcessUrl this field in the json
$scope.transitionResponse = {};
instead it should be like this
$scope.transitionResponse={
"OnlineDistributionProcessUrl":null
}
or you can use
$scope.transitionResponse['OnlineDistributionProcessUrl'] = response.data.OnlineDistributionProcessUrl;
I am trying to capture the querystring and apply the value to my ng-include.
My querystring: http://mydomain.com/?target=W7ROP175T5TEHW2
My MainCtrl: $scope.target = $location.search()['target'];
$scope.target is picking up the value.
Doing a simple text write, ie {{target}} works.
This does not work: <div ng-include="'/_UserSession/{{target}}/assets/menu.html'"></div>
Any ideas?
You need to escape the value, it is an expression.
ng-include="'/_UserSession/' + target + '/assets/menu.html'"
Also if you want to make sure that target is set before it attempts to include the template, you can add ng-if ="target". This way it will avoid a bad request.
OK, I solved it, I hope this helps others as well:
HTML
<ng-include src="session()"></ng-include>
Controller
$scope.target = $location.search()['target'];
$scope.session = function() {
return "/_UserSession/" + $scope.target + "/assets/menu.html";
};