Snowman41288 Snowman41288 - 5 months ago 9
AngularJS Question

How to render template inside of template with angular and django

Question I want to be able to add a multiple Dimensions(Dimension Class) to my Sheet Class. What I would like to do is pass it into angular then back to Django if possible I just need help/guidance on how to do this I have looked a countless blogs and still can't come up with correct way of doing so any help would be greatly appreciated.

Here is my sheet model and dimension model (model.py)



class Sheet(models.Model):
drawing_number = models.CharField(max_length=255)
drawing_revision = models.CharField(max_length=255)
heat_number = models.CharField(max_length=255)
note = models.CharField(max_length=255)
valc = models.CharField(max_length=255)

class Dimension(models.Model):
description = models.CharField(max_length=255)
style = models.CharField(max_length=255)
target = models.IntegerField()
upper_limit = models.IntegerField()
lower_limit = models.IntegerField()


Here is my view.py with sheet_from_create method and my test method for adding a dim that isn't working.



def sheet_form_create(request):

if request.method == 'GET':
sheet_form = SheetForm()

else:
sheet_form = SheetForm(request.POST)
cust_int = Customer.objects.latest('id').id
cust_int_plus = int(cust_int) + 1
c_date = datetime.now()
u_date = datetime.now()


if sheet_form.is_valid():
drawing_number = sheet_form.cleaned_data['drawing_number']
drawing_revision = sheet_form.cleaned_data['drawing_revision']
heat_number = sheet_form.cleaned_data['heat_number']
note = sheet_form.cleaned_data['note']
valc = sheet_form.cleaned_data['valc']

try:
get_cust = Customer.objects.filter(customer_name=customer_name).exists()
except:
get_cust = False
if get_cust == True:
c = Customer.objects.get(customer_name=customer_name)
c_id = c.customer_id
else:
creat_cust = Customer.objects.create(id=cust_int_plus, customer_id=cust_int_plus, customer_name=customer_name)
c_minus = cust_int_plus
c = Customer.objects.get(id=c_minus)
c_id = c.customer_id

sheet = Sheet.objects.create(

drawing_number=drawing_number,
drawing_revision=drawing_revision,
heat_number=heat_number,
note=note,
valc=valc,
customer_id=c_id)
return render(request, 'app/sheet.html')
return render(request, 'app/sheet_form_create.html', {
'sheet_form': sheet_form,
'title':'New Sheet',

})


I tried this with ajax no luck It will not render my dim.html



def add_dimensions(request):
data = {}
if request.method == 'POST':
dim_form = DimForm(request.POST)
if dim_form.is_valid():
dim = Dimension()
description = dim_form.cleaned_data.get['description']
style = dim_form.cleaned_data.get['style']
target = dim_form.cleaned_data.get['target']
upper_limit = dim_form.cleaned_data.get['upper_limit']
lower_limit = dim_form.cleaned_data.get['lower_limit']

dim.save()
data['description'] = dim.description;
data['style'] = dim.style;
data['state'] = "ok";
return HttpResponse(json.dumps(data), mimetype="application/json")
else:
data = 'fail'
return render(request, 'app/sheet_form_create.html')
else:
dim_form = DimForm()
return render(request, 'app/dim.html', {'dim_form': dim_form})


Here is my sheet_form_create.html this is where I want my dim.html to render inside of as well



{% extends "app/layout.html" %}
{% load crispy_forms_tags %}
{% block content %}



<br />
<br />
<br />



<div class="row" >
{% crispy sheet_form %}
</div>

<body ng-app="dim_app">
<!-- render my dim.html here somehow -->
<div ng-controller="DimCtrl">
<div class="data">
</div>
<button ng-click="save()">Click</button>
</div>

</body>
{% endblock %}


Here is my dim.html



{% extends "app/layout.html" %}
{% load crispy_forms_tags %}
{% block content %}



<br />
<br />
<br />


<div class="row" >
{% crispy dim_form %}
</div>

{% endblock %}


Last but not least my angular code that I have so far for testing purposes here is where I am most confused



dim_app = angular.module('dim_app', []);


dim_app.controller('DimCtrl', ['$scope', function($scope) {
$scope.num = 0;
$scope.save = function () {
$(".data").html("click:" + $scope.num);
//some how load dim.html in here how ever many times its clicked example they click 5 times render dim.html five times and save each on as a child record of sheet
$scope.num += 1;
};

}]);


This is an example of what I would like it to look like



Example of what I would like to see

Answer

I figured it out.

Here is my angular code

dim_app = angular.module('dim_form', [])

  .controller('dim_ctrl', ['$scope', '$compile', function ($scope, $compile) { 

      $scope.show_dim = function () { 
          var comp = $compile("<div </div>")($scope); 
          $("#id").append(comp); 
      }; 
  }]) 
  .directive('myDim', function () { 
      return { 
          templateUrl: '/sheet/sheet_form_create.html/_dim' 

      }; 
  }); 

Here is my sheet_form_create.html

    {% extends "app/layout.html" %} 
    {% load crispy_forms_tags %} 
    {% block content %} 



    <br /> 
    <br /> 
    <br /> 



    <div class="row" > 
      {% crispy sheet_form %} 
    </div> 

    <body ng-app="dim_form"> 
      <div ng-controller="dim_ctrl"> 
          <a href="#" ng-click="show_dim()">show</a> 
          <div id="d"></div> 
      </div> 
    </body> 

    {% endblock %} 
Comments