How can a parameter from an URL be read within an AngularJS controller?
Let's say I have an URL like http://localhost/var/:value and I want the value to be stored in a variable within the controller for the /var/:value URL.
I have tried using $routeParams.value and $route.current.params.value but $routeParams is undefined at the beginning and $route doesn't work.
The problem is that you probably inject $routeParams or $route in a controller that is run before a route change has occurred, e.g. your main/master/page controller.
If you inject $routeParams in a controller for a specific route (specified by the controller property when you define the route), then it will work, otherwise you're probably better of listening to the various events the route service broadcasts.
Try to change your code to use
$scope.$on('$routeChangeSuccess', function (ev, current, prev) {
// ...
});
Requirements: Ensure 'ngRoute' is in your app module
Route provider set up as: http://localhost/var/:valName
Function set up as:
function functionName($scope, $routeParams){$scope.value = $routeParams.valName;}
HTML view:
{{value['valName']}}
Related
I'm using i18n for localization in my project but whenever i change the language, all page's translate is okay except grid header names! Its getting normal when i refresh the page.How can fix this situation without refresh ?
You can fix this by calling the refreshHeader function on the reader API.
try this :
this.gridApi.refreshHeader();
where the gridApi is the API object you get from the onGridReady event params.
EDIT, how to get the gridApi :
the gridApi u get from the params of the onGridReady method being called by the AgGrid component.
if you are using reactJs, an attribute named onGridReady in your agGrid component would accept that function.
onGridReady = params => {
this.gridApi = params.api
this.gridColumnApi = params.columnApi
...
}
If you are using headerName, maybe try to use computed() function to get ColDef
Ex:
const colDef = computed(() => // coldef here)
I'm trying to understand the solution in this SO post. The solution allows the user to keep track of the previous route in the current route.
Below is the snippet of Vue code that I'm trying to understand. If I understand correctly, next accepts a callback function that receives the current component's vue instance. We then set the prevRoute data property of this vue instance to from. Is this interpretation correct? If not, what is actually happening?
If someone could also add a brief explanation as to what the Vue API is doing behind the scenes that would also be very helpful for me to actually understand the snippet of code.
...
data() {
return {
...
prevRoute: null
}
},
beforeRouteEnter(to, from, next) {
next(vm => {
vm.prevRoute = from
})
},
...
As per the documentation...
The beforeRouteEnter guard does NOT have access to this, because the guard is called before the navigation is confirmed, thus the new entering component has not even been created yet.
However, you can access the instance by passing a callback to next. The callback will be called when the navigation is confirmed, and the component instance will be passed to the callback as the argument
So vm is the component instance assigned to the destination route.
From your question...
We then set the prevRoute data property of this vue instance to from. Is this interpretation correct?
Almost. All you're doing is setting a direct object property on the Vue component which is after all, just a JavaScript object at heart. For example
const vm = { name: 'I am totally a Vue component' }
vm.prevRoute = from
This property will not be reactive but you can certainly access it within your component via this, just as you can other non-data properties like $el, $refs, etc.
I'm working on an app in React Native, and am having trouble accessing props that I feed into a component I made.
If I do console.log(this.props) within the constructor, I can see the props display in the console as desired, however if I put it in any other method, it prints undefined. How can I access the props that are clearly being sent to the component from outside of the constructor method?
You are probably adding new methods that are not binding this.
Check if you are writing the method like this:
myMethod(){
//Code
}
and just change it to:
myMethod = () => {
//Code
}
Edit: Like #Li357 says, these are called arrow functions. Arrow functions don't bind this automatically, and as a consequence receive the this of the surrounding class. In your case it will solve your issue as you want to access the properties of that class but you might want to read about it and how binding works in JS classes.
Another option is to write function.bind() but either way should work.
Context:
I have a section of a view that I want to update on a regular interval via JS.
What I have done so far:
Using the information given in: Viewcomponent alternative for ajax refresh
created a view component that encapsulates the region that I want to refresh
attempted to create a custom route to a view component as follows
options.Conventions.AddPageRoute("/Components/ViewComponent/default", "FriendlyRouteAlias");
use the following script to attempt to load the (updated) view component and inject the value into a div:
<script>
var container = $(".DataToUpdate");
var refreshComponent = function () {
$.get("Route/to/view/component", function (data) { container.html(data); });
};
$(function () { window.setInterval(refreshComponent, 1000); });
</script>
Is it even possible to load a View Component this way or should I be looking at another way of accomplishing this?
As the commenters suggested, I was able to get it working by using an MVC controller action to return the view component directly. I will add that I used an MVC controller rather than an API controller because I was dealing with a view rather than data. (see Difference between ApiController and Controller in ASP.NET MVC)
I am trying to pass a function into recaptcha to be used as a callback. I need to write:
data-callback="function"
In Vue how do I add the function reference?
I've tried:
data-callback="{{ this.submitFocus }}"
data-callback="this.submitFocus"
I'm using Vue 2
Recaptcha2 uses the data-callback string to call a globally available function.
From what I can see in the documentation, it doesn't look like there's a programmatic way to set this so you might have to use something like this
beforeMount () {
window.submitFocus = () => { // using arrow function to preserve "this"
this.submitFocus()
}
},
beforeDestroy () {
delete window.submitFocus
}
with
data-callback="submitFocus"
in your template. The attribute value just needs to match the function added to window.
data-callback is an html attribute of a DOM element, it's just a string. It does not know about the context of your object instance, ie. this.
So, you can't use this when setting the attribute for your ReCaptcha, it will only understand functions that can be called without this.
If you had a function defined as
function submitFocus(){ ... }
globally, you could get ReCaptcha to call it by setting data-callback to submitFocus without the reference to this.
data-callback="submitFocus"