Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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.