angular-dynamic-forms icon indicating copy to clipboard operation
angular-dynamic-forms copied to clipboard

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

Open salangar opened this issue 8 years ago • 12 comments

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?

salangar avatar Jun 13 '16 11:06 salangar

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

danhunsaker avatar Jun 13 '16 16:06 danhunsaker

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

salangar avatar Jun 14 '16 05:06 salangar

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.

danhunsaker avatar Jun 14 '16 07:06 danhunsaker

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

salangar avatar Jun 14 '16 12:06 salangar

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 avatar Jun 16 '16 07:06 salangar

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

salangar avatar Jun 16 '16 09:06 salangar

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.

danhunsaker avatar Jun 16 '16 14:06 danhunsaker

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

salangar avatar Jun 16 '16 15:06 salangar

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.

danhunsaker avatar Jun 16 '16 15:06 danhunsaker

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 :(

salangar avatar Jun 16 '16 15:06 salangar

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.

danhunsaker avatar Jun 16 '16 16:06 danhunsaker

Thanks you! that worked. Great implementation!

salangar avatar Jun 17 '16 05:06 salangar