FREELessons: 17Length: 2.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 New Field Directive: The Template

Now I mentioned that we were going to create two directives, but so far we've only created one. The second directive is similar to the form field directive, but takes a little bit of a different twist. Think of it this way. With the form field directive that we've created we can edit, and potentially remove, any field on our contact object. But, what we can not do is add a new field that is not already there, and that is what the add field directive, which we're going to begin in this screen cast allows us to do. It will allow us to create a new field of any type on any of our record objects, whether we're just creating it or we're also gonna be able to use this directive in our edit contact form. We'll start where we left off, here in our public/views/new.html template. This is the template that our new contact form page uses. And let's add our our new directive down below. It's going to be called new field, and it's gonna take a record, which will be the contact. And it will also take live equal to false, in this case. And now that we've created one directive, you can see that this new one should be a little bit easier for us. In fact, both of these attributes, record and live, are going to do exactly the same thing as they do here in the form field directive. So, let's go ahead and start with the template, as we did before. This is gonna be public views new-field.html. So we're gonna start with a div which for once, will not have any classes on it. And this is gonna wrap another div here which will have our class row and also our class form group. Now what we're about to create is a Twitter Bootstrap drop-down menu. Basically it will be a button with a little arrow on it and it will say add new field. And when we. We click that button, a drop-down will appear and it will give a bunch of different field types that we could choose. And these are the same types that we've seen previously. So it could be text or it could be a telephone number. It could be a date or a date time. It could even be a color. All of these will be available. And the user will go ahead and choose one of those and then we will add that field to our record. So inside our row div here, we need to create a div for our drop down menu. So it's going to be div with a class. First of all it's going to be button group because this is actually a button that we're looking at. And we're also going to do the call dash sm dash offset dash two to offset it a bit. And then we need the drop down class. But actually, because this is gonna be near the bottom of the page I'm actually gonna do drop up instead. So it works exactly like drop down except it allows us to move our drop down up instead of down. Alright so in here, we have the actual button and this will have the usual classes of button and button dash default. But we'll also add the class of drop down dash toggle. And then we're gonna use jQuery to activate this toggle. But we don't want to actually have to instantiate this with jQuery. We're gonna let jQuery and bootstrap.js do it on their own. Remember, we've already added those files to our main.html page. So now we can do a data-toggle. And we will call this drop down. And that will activate our drop down when this button is clicked. So inside the button we'll add the text, add new field. And then we'll add a span with a class of carrot. And this span will just show a little carrot, indicating that this is a drop-down field. All right, so now let's add an unordered list, it will have a class drop-down menu. Then in here we will have a list item which we will do an ngrepeat on. And this will be the same thing that we did with the field types inside of our validation divs with ngMessages in our form field directive. So we'll just say key in value in types and then in here, we can have an anchor element which will have an ng-click attribute on it. And this will call the function show passing at k being the key. But the user will see v zero. Now, if you don't remember what these values are, I'll go ahead and open public source directives, and this types object here that we're looping over is this field types object right here. So k is the key which is the keys here which are the actual names for the HTML5 input types and V zero is the user friendly version. So URL, is capital URL or telephone, tel as phone number and so that's what will show up here. So now above this div, we're going to create another div, and this, of course, will have its own class row and form-group. And this div will appear once the user has chosen a type to make their new field. And this is gonna be a form of its own, so it's gonna have an ng-form. And we'll call this form new-field. And we're gonna add ng-if and we're only gonna add this element if the display property is true. So now in here we wanna have three divs going along width wise inside of this Twitter bootstrap row. First div will have a class column-small-2. Right? And then the second one. Will be 6 and the last one will be 4. Now in the first one here, we're gonna have an input for the field name so we'll have an input, we'll have the type of text, we will have the name as fieldName, we'll give it a class of form control. We will make this required because our field needs to have a name we also wanna add ng-model. And this is going to be So, we're going to have a field object that we're keeping track of as we add our new field here, and will be where that value that they type into that input box is stored. Finally, we will add some placeholder text that just says name. Now we also want to have an input element inside of our second column. This input is of type equaling field.type, right? And this of course is going to come from this function down here when we showed k. K is the type. And that will end up being field type up above. And now the rest of the attributes will be similar to what we have above. The name, will be field value. The class is going to be form control. This will not be required, meaning they can create a blank field. The model will be equal to field.value and finally we'll have a placeholder that just says value. Finally in the last column here we will have two buttons, both of course will have the class of button and the class of primary. The first one will say add, go ahead and add this field to our record. And the second one will say remove. Both of course will need ng-click attributes so let's go ahead and add ng-click and this we'll call the add function and then this one down here ng-click we'll call the remove function. Excellent. And there you go. That is the entire template for our new field directive. So in the next screencast we'll write the Javascript to wire up this directive to our page.

Back to the top