danhunsaker / angular-dynamic-forms

Build Forms in AngularJS From Nothing But JSON (please see Alternatives in the README)
MIT License
379 stars 140 forks source link

Regarding dynamically loading the template from a response from $http service - question/issue #70

Open salangar opened 8 years ago

salangar commented 8 years ago

I have the following code:

html:

{{formTemplate}}

app.js:

.when('/register', { controller: 'RegisterCtrlr', templateUrl: 'views/register.html', controllerAs: 'register', resolve: { getResolveStatus: getResolveStatus } })

         function getResolveStatus(ServiceFactory) {
    console.log("hell0....");
    return ServiceFactory.getFormData();
}

controller: .... deferred = $q.defer();

  var sessionService = ServiceFactory.getFormData();

  var resolve =
  //$scope.formTemplate = 
  sessionService
      .then(ok )
      .catch(reject)
      .finally(finallyIssue);

  console.log("$scope.formTemplate.." + $scope.formTemplate);

};

function ok(response) {
  console.log('User reg form :'+ response);
  .....

    result.push(
       {
           "type": response[j].type,
           "label": response[j].title,
           "model": response[j].field_name
           //"values":response[j].
       });

    console.log("result..." + result[j].model);
  }

  result.push({
    "type": "submit",
    "model": "submit",
    "label": "Submit"
  });
  result.push({
    "type": "reset",
    "model": "reset",
    "label": "Cancel"
  });

deferred.resolve(result);

//return result; 
//This is not showing up any template!
$scope.formTemplate = result;

console.log("$scope.formTemplate.." + $scope.formTemplate);

return deferred.promise;

}

It loads teh value - {{formTemplate}}}, but, it does not initiklize the template. How to over come it?

danhunsaker commented 8 years ago

You'll have to recompile the page once the value has loaded. This is an Angular limitation.

salangar commented 8 years ago

Thanks a lot..wanted to confirm that :) Any best practice idea on how to do it?

danhunsaker commented 8 years ago

I haven't done much with Angular recently, so I don't actually remember. It's in the docs, though, and at least one spot in ngDynForms, too.

salangar commented 8 years ago

Thanks! I finally ended up using ng-if for this one to resolve :)

salangar commented 8 years ago

Anyway, is it possible to change the default styles - gap between text label and input and change default color of checked status in radio buttons?

salangar commented 8 years ago

Also, anyway to track reset in my controller, so that once user clicks reset, I want to redirect to cancel page?

danhunsaker commented 8 years ago

Styles are completely CSS; this package doesn't do anything with those.

Look at click in the README. I think that will provide what you're looking for.

salangar commented 8 years ago

Thanks! I tried - result.push({ "type": "reset", "model": "reset", "label": "Cancel", "callback":clickS() also , ng-click, }); did not help!

danhunsaker commented 8 years ago

You'll want to make sure your function call is quoted, since it gets dropped directly into the markup exactly the way it's retrieved. That means you're setting your ng-click attribute to the return value of clickS(), if you aren't quoting it.

salangar commented 8 years ago

Yes, i tried doing it: result.push({ "type": "reset", "model": "reset", "label": "Cancel", "callback":'clickReset' }); and function clickReset(){ console.log("clickReset...") }, its not calling the callback :(

danhunsaker commented 8 years ago

Still need the parentheses. Remember, anything in an attribute is effectively run through eval(), so a function's name won't be enough. You're not assigning the contents of the attribute directly to a callback; it's more like assigning a wrapper around the attribute's contents.

salangar commented 8 years ago

Thanks you! that worked. Great implementation!