I am building a web app and I want to know what is the best and the safest way to pass a variable from a django context dictionary to Angular.
I have access to a variable of the context dictionary from Django template. Should I use ng-init to pass that value to an Angular variable?
It is about a user profile page and I want the user to be able to update his Data. The Data is initialized when calling the view but when I want him to update that Data i want to post using an Angular JS variable.
Thanks in advance
I would add the data as the initial value of each form tag. This answer has a useful "initial" directive to do it in a way that would allow you to use the form even without Angular.
<input name="profile[name]" value="Joe" ng-model="profile.name" initial>
With that, Angular would take the initial value fro the value attribute (as it should be), so that your form would have an initial value even without Angular running.
Related
<input #gb type="text" pInputText class="ui-widget ui-text" ngModel
(ngModelChange)="clearFilter($event)">
I didn't assign any model name to ngModel directive in my code, but Angular 2 accepts this, while AngularJS (1.x) doesn't. Which scenario we need to use this kind of ngModel directive without providing model name?
Angular 2 accepts it because the object could be set later. A proper way of coding this would be to check if the object exists first, and only then show the object if it exists.
For example: You are using a service to instantiate all your objects on the page. Whenever a user goes to one of your pages you do not want to let the user wait for the response of the service, but you want to show them all the content of the page immediately. The service response will instantiate the objects later and only then show them to the users.
This could be done for example by the onInit interface that Angular 2 provides. This makes sure that you can call on services and instantiate objects after the html elements are already fully loaded.
Angular2 just gives you this possibility for free because whenever the object doesn't exist, it just won't show them to the user.
The difference between angularJs (Angular1) and Angular(Angular2 or Angular4) are huge and this is just one of many examples. You could look at it this way: the only thing the two frameworks (AngularJS and Angular2) have in common is that they share a couple of the same letters.
Upon request I render a jade template passing some parameters to template
res.render("result.jade",{order_id: "abc123"});
What is the best way to bind this passed parameters to scope variables when being rendered on client side? I haven't found any good solution except to render it to some hidden dom element and then take its text value (with jquery, for example) and assign it to scope variable, like this
// jade template
div.hidden #{order_id}
// javascript code
$scope.order_id = $(".hidden").text();
I would recommend you make this data available as a separate API call, such as REST. Then your Angular app would call this API to get the data on load, etc.
I have a question about the best way to structure the flow of an app using Angular 1.3. I'm trying to incorporate the 'Component-based Directive' approach as per guys like Matias Niemela (https://www.airpair.com/angularjs/workshops/component-based-directives-angularjs). He says in a video to still use controllers for routing rather than going completely controller-free, but to use directives to create reusable components that have all their dependencies injected.
I'm a bit new to Angular but have used Java mvc frameworks before where a controller written in Java first finishes getting the data needed on the page to be displayed, before some html is constructed and served up. I'm wondering if I'm coming a bit unstuck due to the asynchronous nature of the javascript calls used in Angular, maybe assuming things happen in an order they can't be guaranteed to....
I want to try to make the directives involved have anything they rely on injected (likely via attr's) for increased test-ability etc.
I had envisaged something like the following, for a simple customer listing, with clicking on a single customer in that list going through to a customer details page:
1) a route is defined with a target html page and a controller.
2) The controller gets the list of customers (ideally via a service), which is then available to the html page via Controller As (so Controller MyController As myCont, means the list should be available via something like myCont.myCustomers
3) A Directive is defined to display a customer row's details (name/address, plus a clickable link that passes the customer number as a parameter to a details page)
4) The html page has an ng-repeat to display all of myCustomer in myCustomers, using the Directive. So, I would want to pass the single customer details into the directive via Attr's (for my dependency injection) and then get them displayed for each customer...
(Alternatively, of course, the directive could take in all the customers and display all of them)
So, my question is really whether this is the correct approach to take, or am I missing something about the way these apps need to flow? I've tried unsuccessfully to get it working (posting this from home and my attempt is at work... I'll post the attempt if ppl think it valuable, but really my first question is about whether my overall approach is inherently flawed or not)
And then, secondly, to get the data for each customer passed to the directive, I'm assuming I need to pass the fields in in the html page that has the directive in it, passing something like {{ myCustomer }}... is this correct? (can I assume the Controller will have finished getting all the data before the ng-Repeat tries to cycle through all my customers and send their data to the directive, or not, in which case should I be passing the data via some other mechanism?)
I can't seem to find any examples on the web that tie together Component based Directives, with routing via a Controller, passing data from that controller to the directive, so any help is greatly appreciated!
Thanks!!
I'm new to Angular, and working on my first full webapp with it.
I have a form with a field that is required. So, I understand that it's bound ngModel value will be undefined. The user can choose to enter the value in the field manually, or they can click a button triggering a function that will populate it.
By default the field is blank and invalid and I'm unable to set it's value from the controller.
In the view:
<input type="number"
min="0"
max="50"
placeholder="0"
name="entry-total-score"
id="entry-total-score"
ng-model="entry.total.score"
required />
In the controller:
$scope.entry.total.score = computedTotal;
How can I initialize that data binding manually?
My guess is that you are simply forgetting to initialize total before trying to set score in your controller. It is also possible that (like Ben Diamant pointed out) that you are not setting your variable in your scope correctly.
The correct way to set it in the scope would be: $scope.entry.total.score = computedTotal;
You should be adding variables to the $scope or to "this" in the controller in order to access those variables in your angular HTML.
If you go the second route you need to make sure that you use the ng-controller="<ControllerName> as <RefName>" then use it in your HTML based on your ref name.
I made an example that I believe does what you want.
http://plnkr.co/edit/fbz1nSHPGZN2k4oYCCFA?p=preview
I hope this helps
you can also use jquery with angular, in your controller.
jQuery('#entry-total-score').val(computedTotal);
if you actually want the work and computedTotal is not a variable use .val("computedTotal")
If you want to only use angular then i think Ben's comments should work. It is nice to know though that angular and jquery play super nice. Instead of using the '$' for jquery just use jQuery and eveything works great. Also make sure to include jquery in your header with a
I'm fairly new to angular, after using a video tutorial and reading some documentation, I decided to rebuild an old app of mine as an example with angularjs.
So this app has a table showing some data. It has a form underneath which helps you modify the data from the list. You have a button on each line which allows you to edit the line, it then fill all the fields in the form and you can then save or cancel your changes.
I made a controller to handle the list, it works fine, it gets a json from http.
I used ng-click on my edit button to trigger a function in this controller, giving it the whole object it's supposed to edit.
I made a controller to handle the form in which the edit should take place and I don't really found a 'non-hacky' way to pass the data from the list controller to the form controller.
So, my question is : what is the best practice and/or the common way to get this data from my list controller to my form controler ?
It depends how you are using the form controller. If it's being used within a template using ng-controller attribute, then this controller has access to parent scope, so you can work with list controller's data. (although note some scope-inheritance quirks solved by "dot notation", explained nicely by egghead.io: https://egghead.io/lessons/angularjs-the-dot)
If you're launching your edit form in a another url (e.g. /items/2/edit) and handle it in a routing configuration, then you can use resolve property to pass any data to the controller: $routeProvider docs.
You can pass the entire object as parameter
<row ng-repeat="theModelInRow in modelList" ng-click="edit(theModelInRow)">
if form controller isn't a nested controller of list controller on view, then you can use rootScope.