Tabarray tabs do not load as promised

[rhalff]

When the data is loaded async the tabs will not update.

I've created an example overhere: http://plnkr.co/GFCCJ3XLB6FscPhrF7NW
(Also note clicking new, will reveal the second item)

angular.module('test', ['schemaForm']).controller('TestCtrl', function($scope, $q) {

  function asyncLoad(data) {
    var deferred = $q.defer();

    setTimeout(function() {
      deferred.resolve(data);
    }, 0);

    return deferred.promise;
  }

  var modelData = {
    names: [{
      name: 'me',
      title: 'Me'
    }, {
      name: 'hi',
      title: 'Hi'
    }]
  };


  // without a promise the tabs are correct
  // $scope.modelData = modelData;   

  // somehow the tabs are not loaded
  asyncLoad(modelData).then(function(data) {
    $scope.modelData = data;
  });


  $scope.schema = {
    "type": "object",
    "properties": {
      "names": {
        "type": "array",
        "items": {
          "type": "object",
          "title": "subform",
          "properties": {
            "name": {
              "type": "string"
            },
            "title": {
              "type": "string"
            }
          }
        }
      }
    }
  };

  $scope.form = [{
    key: "names",
    type: "tabarray",
    'title': 'value.title || value.name || "Property " + ($index + 1)',
    add: "New",
    style: {
      remove: "btn-danger"
    },
  }];
});

[rhalff]

Loading everything from the callback does work, so my problem is fixed.

angular.module('test', ['schemaForm']).controller('TestCtrl', function($scope, $q) {

  function asyncLoad(data) {
    var deferred = $q.defer();

    setTimeout(function() {
      deferred.resolve(data);
    }, 0);

    return deferred.promise;
  }

  var modelData = {
    names: [{
      name: 'me',
      title: 'Me'
    }, {
      name: 'hi',
      title: 'Hi'
    }]
  };

  // without a promise the tabs are correct
  // $scope.modelData = modelData;

  // somehow the tabs are not loaded
  asyncLoad(modelData).then(function(data) {

    $scope.modelData = data;

    $scope.schema = {
      "type": "object",
      "properties": {
        "names": {
          "type": "array",
          "items": {
            "type": "object",
            "title": "subform",
            "properties": {
              "name": {
                "type": "string"
              },
              "title": {
                "type": "string"
              }
            }
          }
        }
      }
    };

    $scope.form = [{
      key: "names",
      type: "tabarray",
      'title': 'value.title || value.name || "Property " + ($index + 1)',
      add: "New",
      style: {
        remove: "btn-danger"
      },
    }];

  });

});

[Sandreu]

Hello,

This is a workaround. This is still a bug... If you want to change the array ref (after a model refresh for example) the problem comes back ! Because sfArray directive keep the first array ref instead of using the right scope.model[form.key] ref...

Could you reopen this issue?

[Sandreu]

And this is the same thing with regular arrays. The issue is in sfArray directive.