Running angular custom directive when model gets loaded via $resource

Question

I have the following problem with angular custom directives. I have a modal dialog that gets filled with input elements. These input elements get filled using ng-repeat angular directive like this

            <div ng-repeat="item in params">
                <label>{{item.nombre}}{{item.valor}}</label>
                <div class="input-group" ng-if="item.tipo=='DATE'">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    <input  type="text" name="{{item.nombre}}" class="form-control reportesFechas" ng-model="item.valor"
                            data-custom-datepicker data-date-format="dd/mm/yy" id="{{item.nombre}}">
                </div>
            </div>

data-custom-datepicker is my custom attribute. The params model gets filled via a service call to a java backend like this

         appbsReportsParamsService.query({
            q: "idReport="+id
        }, function(data){
            $scope.params = data.content;
        })

The service call works OK because the final HTML is "correct" in terms of inputs gets generated. However data-custom-datepicker doesn't get applied. This is the HTML "ng-repeat" portion being generated:

<div class="input-group ng-scope" ng-if="item.tipo=='DATE'">
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
    <input type="text" name="fecDesde" class="form-control reportesFechas hasDatepicker ng-pristine ng-valid ng-touched" ng-model="item.valor" data-custom-datepicker="" data-date-format="dd/mm/yy" id="fecDesde">
</div>
<div class="input-group ng-scope" ng-if="item.tipo=='DATE'">
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
    <input type="text" name="fecHasta" class="form-control reportesFechas hasDatepicker ng-pristine ng-valid ng-touched" ng-model="item.valor" data-custom-datepicker="" data-date-format="dd/mm/yy" id="fecHasta">
</div>

So basically I want to know how to apply the directive after a async service call to populate the model.

score 0 · Answer 1 · answered Jul 19 '15 at 00:19

Try adding $scope.$apply() in your service success call after $scope.params = data.content.

Because your params service query is running outside of the $scope in Angular, doing the $apply, will force update the $scope.

See if that helps.

appbsReportsParamsService.query({
  q: "idReport="+id
}, function(data){
  $scope.params = data.content;
  $scope.$apply();
});

score 0 · Accepted Answer · edited May 23 '17 at 11:51

0

Ok, the problem was I was running the directive code under "compile" phase. I change it to "post" phase, now everything works ok. The problem is the Angular workflow (not the problem, but where my misconception was). This post helped me understand.

Angular directives - when and how to use compile, controller, pre-link and post-link

edited May 23 '17 at 11:51

Community

1
1

answered Jul 26 '15 at 16:15

Alfredo A.

1,697
3
30
43

Running angular custom directive when model gets loaded via $resource

2 Answers2