Question

我正在尝试使用带角度js的django

这是控制器myHeader.js

var myHeader = angular.module('myHeader', []);

myHeader.controller('HeaderController' , ['$scope', function($scope){

    $scope.PasswordReset = function(){
        $scope.message = "done";
    };
}]);

然后我将此控制器包含在header.html

中

<script  type="text/javascript" src="{% static 'js/libs/angular.min.js' %}"></script>

<!-- Angular Includes -->

<script  type="text/javascript" src="{% static 'js/controllers/myHeader.js' %}"></script>

<body ng-app="myHeader">
<div id="forgotPass" ng-controller="HeaderController">

                        <h4 class="modal-title text-center" style="font-size:18px; margin-bottom:10px; margin-top:10px;"><strong>Change Password</strong> </h4>

                        <div id="div_id_email" class="form-group required">
                        <div class="controls ">
                        <form id="password_reset" action="{% url 'account_reset_password' %}" method="POST" novalidate ng-submit="PasswordReset()"> 
                        {% csrf_token %}
                            <input class="emailinput form-control" id="id_email" name="email" type="email" placeholder="E-mail" style="margin-bottom:10px" ng-model="user.email" ng-required="true"/> 
                            {{message}}

                            <div>
                            <input class='btn btn-block btn-primary pull-left' id="pass-btn" type="submit" value="SUBMIT" style="width: 63%" />
                            <input class='btn btn-block btn-primary pull-right' style="width:34%; margin-top: 0px; background-color: #757575; border: 1px solid #616161;" value="Cancel" id="canPass"/>
                            </div>
                            <div class="error-box">
                            <div class="err2"></div>                        
                            <div class="ajax-sign"><img src="/static/images/ajax1.gif" height="30px"></div>
                        </div>
                        </form> 
                        </div>
                        </div> 
                    </div>
</body>

上述header.html文件包含在base.html

中

{% load staticfiles %}
{% include 'products/header.html' %}
{% block content %}

{% endblock %}

使用Above我提交表单时无法看到范围变量消息值。我怎样才能摆脱上述问题？

Answer 1

混合常规表单和AJAX是一个常见的陷阱。我建议您阅读有关ng-submit和Angular中使用表单的文档。 https://docs.angularjs.org/api/ng/directive/ngSubmit https://docs.angularjs.org/api/ng/directive/form#submitting-a-form-and-preventing-the-default-action

由于表单在客户端Angular应用程序中的作用是与经典的往返应用程序不同，它是理想的浏览器不将表单提交翻译成整页重新加载将数据发送到服务器。而是一些javascript逻辑应该触发处理表单提交特定于应用的方式。

提交表单时会导致整页重新加载，因此您的控制器会重新初始化并且其$ scope.message不存在。如果要阻止默认表单提交操作，则应删除＆＃34;操作＆＃34;和＆＃34;方法＆＃34;从您的表单定义，并改为进行AJAX调用（在ng-submit回调时）..

无法看到角度范围变量

1 个答案: