在Django塊元素中的角度失敗

Question

我想在我的Django模板中運行角度驗證。它似乎沒有在塊模板標籤內工作。但它似乎在它之外工作。另外，它不會在控制檯中引發錯誤。

我的代碼是：

{% extends 'base.html' %} 
{% load staticfiles %} 

{% block head_block %} 
    <title>Item Create</title> 

    <script> 
     var app = angular.module('myApp', []); 
     app.controller('validateCtrl', function ($scope, $http) { 
      $scope.validLevel = 0; 
      $scope.setSelectValid = function() 
      { 
       $scope.validLevel = 1; 
      } 
     }); 
    </script> 
{% endblock %} 

{% block body_block %} 

    <div style="padding-left: 10px;padding-right: 10px"> 
     <form id="id_form" action="" 
       class="form-horizontal ng-dirty ng-valid-required ng-valid ng-valid-nx-equal ng-scope" method="post" 
       ng-app="myApp" ng-controller="validateCtrl" name="myForm" 
       novalidate> 
      {% csrf_token %} 
      {% verbatim %} 
      <div class="row form-group"> 
       <div class="col-md-6 col-md-offset-3"> 
        <label for="id_level" class="control-label">Level</label> 
       </div> 
       <div class="col-md-6 col-md-offset-3"> 
        <select ng-change="setSelectValid()" class="form-control" id="id_level" name="level" ng-model="level"> 
         <option ng-repeat="x in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]" value="{{ x }}">Level {{ x }}</option> 
        </select> 
       </div> 
      </div> 

      <div class="row form-group"> 
       <div class="col-md-6 col-md-offset-3"> 
        <label for="id_item" class="control-label">Item Name</label> 
       </div> 
       <div class="col-md-6 col-md-offset-3"> 
        <input type="text" class="form-control" id="id_item" name="item" 
          placeholder="Enter Item Name" 
          ng-model="item" ng-minLength="2" required> 
        <span ng-cloak style="color:red " 
          ng-show="myForm.item.$touched && myForm.item.$invalid "> 
        <p ng-show="myForm.item.$error.required ">Item name is required.</p> 
        <p ng-show="myForm.item.$error.minlength ">Should be at least 2 characters.</p> 
        </span> 
       </div> 
      </div> 

      <div class="row form-group "> 
       <div class="col-md-6 col-md-offset-3"> 
        <label for="id_description" class="control-label ">Description</label> 
       </div> 
       <div class="col-md-6 col-md-offset-3"> 
        <textarea class="form-control" id="id_description" name="description" 
          placeholder="Enter item description" 
          ng-model="description" ng-minLength=5 rows="5" 
          required></textarea> 
        <span ng-cloak style="color:red " 
          ng-show="myForm.description.$touched && myForm.description.$invalid "> 
        <p ng-show="myForm.description.$error.required ">Item description is required.</p> 
        <p ng-show="myForm.description.$error.minlength ">Should be at least 2 characters.</p> 
         <p ng-show="myForm.description.$error.maxlength ">Should be at most 50 characters.</p> 
        </span> 
       </div> 
      </div> 

      <div class="row form-group "> 
       <div class="col-md-6 col-md-offset-3 "> 
        <label for="id_item_value" class="control-label ">Value</label> 
       </div> 
       <div class="col-md-6 col-md-offset-3 "> 
        <input type="number" class="form-control" 
          id="id_item_value" name="value" placeholder="Item value" 
          ng-model="value" min="1" required> 
        <span ng-cloak style="color:red " 
          ng-show="myForm.value.$touched && myForm.value.$invalid "> 
        <p ng-show="myForm.value.$error.required ">Please enter Item value.</p> 
        </span> 
       </div> 
      </div> 
      <div class="row form-group"> 
       <div class="col-md-offset-3 col-md-6 "> 
        <button type="submit" id="button-info" class="btn btn-primary" 
          ng-disabled="myForm.$invalid || !validLevel">Create Item 
        </button> 
       </div> 
      </div> 
      {% endverbatim %} 
     </form> 
    </div> 

{% endblock %} 

Answer 1

我剛剛發現的情況下有在頁面兩個或多個角度的應用程序。我只需要在最後添加這一行。

angular.bootstrap(document, ['<app-name>']);