Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jenny Swift
Jenny Swift
21,999 Points
Posted by Jenny Swift
Jenny Swift
21,999 Points

trouble making my custom AngularJS directive flexible

Hi, I have a lot of repetitive code and I am learning AngularJS and so I thought I'd try making my own directive to make my code more DRY. I had success with making a directive that included a static HTML template, but the code I want to make DRY is slightly different in each case, and so I need my HTML template to be able to change depending on the case, and I'm not sure how to do that. For example, here is a sample of the code I want to make DRY:

<div class="tag-input-wrapper">

    <input ng-model="typing.new_transaction.tag" ng-focus="new_transaction.dropdown = true" ng-blur="new_transaction.dropdown = false" ng-keyup="filterTags($event.keyCode, typing.new_transaction.tag, new_transaction.tags)" placeholder="tags" type='text' id="new-transaction-tag-input" class="filter-input">

    <div ng-if="new_transaction.dropdown" id="new-transaction-dropdown" class="tag-dropdown">
        <li ng-repeat="tag in autocomplete.tags" ng-class="{'selected': tag.selected}" data-id="{{tag.id}}">{{tag.name}}</li>
    </div>

</div>

<div class="tag-input-wrapper">

    <input ng-model="typing.edit_transaction.tag" ng-focus="edit_transaction.dropdown = true" ng-blur="edit_transaction.dropdown = false" ng-keyup="filterTags($event.keyCode, typing.edit_transaction.tag, edit_transaction.tags)" placeholder="tags" type='text' id="edit-transaction-tag-input" class="filter-input">

    <div ng-if="edit_transaction.dropdown" id="edit-transaction-dropdown" class="tag-dropdown">
        <li ng-repeat="tag in autocomplete.tags" ng-class="{'selected': tag.selected}" data-id="{{tag.id}}">{{tag.name}}</li>
    </div>

</div>

So both cases of my .tag-input-wrapper have a lot in common but they need to be different to each other in that they pass different parameters to my filterTags function, and also they have different values for the built in AngularJS directives I have given them.

Could someone please help me understand how to get my code more DRY here? It feels quite messy at the moment.