1

I have a segment of code needs to be reuse a lot, there for I want to just create a directive for it.

<div class="btn-group">
    <div class="input-group">
        <div class="has-feedback">
            <input type="text" class="form-control" placeholder="BLAH BLAH" ng-model="model">
                <span class="times form-control-feedback" ng-click="model=''" ng-show="model.length > 0"></span>
        </div>
    </div>
</div>

I want to use this code as template in directive. Create a directive used as follow:

<div search-Field ng-model="model" placeholder="STRING"></div>

to replace to old html, ng-model and placeholder will be as variables.

angular.module('searchField', [])  
.directive('searchField', [function () {
    return {
        scope: {
            placeholder: '@',
            ngModel: '='    
        },
        templateUrl: 'Partials/_SearchInputGroup.html'
    }
}]);


Is it the way of doing it?

1 Answer 1

2

That looks fine.

Here is a sample for you -http://plnkr.co/edit/LCWHRj6xc9bxwrgpaAb4

corrected few typos and binded placeholder and ngModel data in the directive.

Template:

<div class="btn-group">
  <div class="input-group">
    <div class="has-feedback">
      <input type="text" class="form-control" placeholder="{{placeholder}}" ng-model="ngModel">
      <span class="times form-control-feedback" ng-click="model=''" ng-show="ngModel.length > 0">Show</span>
    </div>
  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.