How to use daterangefilter in smarttable?

Question

I am trying to use this smarttable daterangefilter in my app: http://plnkr.co/edit/JSwbEfUOf3OilZkmwgK5?p=preview. I added this filter to my table:

<tr>
          <th>
              <st-date-range predicate="account.settlementDate" before="query.before" after="query.after"></st-date-range>
          </th>
</tr>

When I integrate the files in my app I get this error:

Error: [$compile:multidir] Multiple directives [stDateRange, stDateRange] asking for template on: <st-date-range predicate="account.settlementDate" before="query.before" after="query.after">

How can I avoid this error?

Did you added the template 'stDateRange.html' in your project? — Satyam Koyani, Sep 22 '15 at 06:20
Is it in the same folder where this js file of directive stituded ? — Satyam Koyani, Sep 22 '15 at 12:32

score 1 · Answer 1 · answered Sep 22 '15 at 22:15

Here if you go to this demo plnkr which you have mentioned and check script.js. There are two different directives stDateRange and stNumberRange implemented into that.

<tr>
    <th>
       <st-date-range predicate="account.settlementDate" before="query.before" after="query.after"></st-date-range>
    </th>
</tr>

Here your template you are using one of directive named stDateRange in your template.

When this template loads into the DOM. It will compile that directive and will go to find template configured with that directive on specified templateUrl.

Check out plnkr's script.js. you will find below config of directives.

Some part shown here

 restrict: 'E',
                require: '^stTable',
                scope: {
                    before: '=',
                    after: '='
                },
                templateUrl: 'stDateRange.html',

Here templateUrl will try to find stDateRange.html in the same folder where this directive script file is located which is not there as you have mentioned in your comment.

This is creating problem to you.

Now Two solutions are there.

1 -> Change this templateUrl in the directive and give correct path of stDateRange.html

2 -> Put stDateRange in the same folder where script.js is located.

This is not a solution:as long as the path is correct it should be able to load this template right? — Pindakaas, Sep 23 '15 at 05:32

How to use daterangefilter in smarttable?

1 Answers1