Scheme form not always rendering as expected

[parky128]

Hi,

I am facing a weird issue using this component in my application.

Currently I am setting the sf-schema and sf-form attributes from scope variables set from the result of $http promises in a containing directive

For the most part this is working fine, but I am finding occasions where the schema form just does not render at all, the sf-render-finished event does not get fired either, so it seems its clearly not invoking the rendering code for the various inputs.

I just cant work out why it works intermittently, it smacks like a timing issue to me some where along the lines.

angular.module 'app'
  .directive 'actJsonSchemaForm', (ProductJsonSchema, $http, $translate, Restangular) ->
    {
      restrict: 'E'
      templateUrl: 'app/modules/json_schema_form/schema_form_generator/schema_form_generator.html'
      scope:{
        ok: '='
        fetchSchemaTypes: '='
        model: '='
        cancel: '='
        currentSchemaId: '='
        form: '='
        primaryButtonText: '@'
      }
      link: (scope, elements, attrs) ->
        scope.$on('sf-render-finished', ->
            console.log 'sf-render-finished'
          )

        scope.initialize = ->
          scope.selectedSchemaId = undefined
          scope.schemaTypesList = undefined
          scope.getSchemaTypes()
          scope.updateCurrentSchema(scope.currentSchemaId)

          scope.options =
            'formDefaults':
                # adds font awesome icons to indicate all required fields, and any fields that have passed or failed validation
                'feedback': "{ 'fa': true, 'fa-asterisk': form.required && !hasSuccess() && !hasError() ,'fa-check': hasSuccess(), 'fa-remove': hasError() }"

          $http.get('assets/locale/schema_form/' + $translate.use() + '.json').then (result) ->
            scope.schemaForms = result.data


        scope.cancelForm = ->
          scope.cancel() if scope.cancel

        scope.okForm = () ->
          scope.$broadcast('schemaFormValidate')
          if scope.form.$valid
            data = {}
            data.fields = scope.schemaModel
            data.type = scope.selectedSchemaId if scope.selectedSchemaId != undefined
            scope.ok(data)
          else
            # TODO: deal with outputting errors to the user
            console.log("Invalid form: "+scope.form.$errors)

        scope.getSchemaTypes = () ->
          if scope.fetchSchemaTypes
            ProductJsonSchema.getList().then ->
              scope.schemaTypesList =  ProductJsonSchema.listNames()

        scope.updateCurrentSchema = (currentSchemaId) ->
          # If a model is supplied then we are in edit mode, so need to set schemaModel
          if scope.model != undefined
            scope.schemaModel = scope.model.fields
          else
            #Reset the schema model
            scope.schemaModel = {}

          if currentSchemaId != undefined
            scope.selectedSchemaId = currentSchemaId
            ProductJsonSchema.get(currentSchemaId).then (data) ->
              scope.generateForm(data.schema)

        scope.generateForm = (schema) ->
          JsonRefs.resolveRefs(schema).then (results) ->
            scope.productSchema = results.resolved
            scope.schemaForm = scope.schemaForms[scope.selectedSchemaId]
            if scope.productSchema.properties.EntitlementExpiryDate
              scope.productSchema.properties.EntitlementExpiryDate.format = "date"
          , (err) ->
            console.log err
            # TODO - Handle error and notify user


        scope.initialize()
    }

The template loaded for the directive above contains the schema form directive like so:

<md-select placeholder="Type" ng-model="schemaType" ng-change="updateCurrentSchema(schemaType)" ng-if="fetchSchemaTypes">
 <md-option ng-repeat="type in schemaTypesList" value="{{type.id}}">{{type.name}}</md-option>
</md-select>

<div sf-schema="productSchema" sf-form="schemaForm" sf-model="schemaModel" sf-options="options"></div>

<md-button class="md-raised md-primary" type="submit" ng-click="okForm()" ng-disabled="form.$invalid || schemaForm.$invalid" >{{primaryButtonText}}</md-button>
<md-button class="md-raised" ng-if="cancel != undefined" ng-click="cancelForm()">Cancel</md-button>

Can anyone provide any suggestions how I could maybe debug this further, or even shed any light on what could be causing the rendering logic to not kick in?

[nicklasb]

Please create a plunker where one can reproduce the issue. It is also a good way to find bugs.. :-)

[Anthropic]

Please re-open if you can provide more information (gist/plunker) to help us to help you :)