AngularJS dotnetnuke 7 开发模块中的表单

Question

我正在使用 AngularJS 开发 dotnetnuke 7 模块。这是我在 View.ascx:

中的代码

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<h2>Validation Example</h2>

<form  ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
  <input type="text" name="user" ng-model="user" required>
  <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">Username is required.</span>
  </span>
</p>

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">Email is required.</span>
  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
  </span>
</p>

<p>
  <input type="submit"
  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
    var app = angular.module('myApp', []);
    app.controller('validateCtrl', function ($scope) {
        $scope.user = 'John Doe';
        $scope.email = 'john.doe@gmail.com';
    });
</script>

代码是从 W3School 复制的，但 AngularJS 似乎运行不正常。这是我的视图的屏幕截图：

我尝试了一个 AngularSJ 简单示例，它运行良好，喜欢：

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

为什么我的第一段代码不起作用？我的模块中的 "form" 标签是否存在任何问题？

Answer 1

你能通过它的 API 做你需要用 DNN 做的事情吗？最好将 Angular 应用程序视为与服务器完全断开连接，就像 iOS 或 Android 应用程序一样。通过 DNN 和 Angular 进行模板化会带来痛苦。谁知道你渲染的 HTML 是什么样子的 - 我敢肯定 DNN/ASP.NET 会破坏它。

如果您可以利用 DNN 的 API，那么正确的心态应该是 "I'm building an Angular application that happens to use DNN for persistence"。

Answer 2

当运行在 DNN/ASP.NET Webforms 中时，表单标签肯定是个问题。我在 DNNHero.com on building Angular applications as DNN modules.

上做了一个教程

两条建议：

使用 div 标签添加您的 angular 控制器指令：

<div id="userForm" ng-controller="validateCtrl" ng-init="init(<%=this.ModuleId%>)">

不要在 html 中硬编码 ng-app 指令。而是使用 bootstrap 方法附加您的应用程序。

<script type="text/javascript"> angular.element(document).ready(function () { var moduleContainer = document.getElementById('userForm'); angular.bootstrap(moduleContainer, ["myApp"]); }); </script>

Answer 3

问题是 DNN 已经包含 <form> 标签（通过 Default.aspx），并且不允许嵌套形式标签。

一个解决方案是使用 <ng-form> 作为替代。例如：

...
<div ng-app="myApp" ng-controller="validateCtrl">
  <ng-form name="myForm">
    <p>Username:
      <input type="text" name="user" ng-model="user" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
        <span ng-show="myForm.user.$error.required">Username is required.</span>
      </span>
    </p>
    <p>
      <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
    </p>
  </ng-form>
</div>
...

此外，您需要关闭 HTML 5 默认表单验证，因为您使用的是 Angular 验证方法（此查询适用于 DNN）：

$(function() {
  $('#Form').attr('novalidate', 'novalidate');
});

进一步阅读：

ngForm directive 在 AngularJS 文档中

Forms：官方AngularJS文档有更好的例子

请注意，W3School 示例不使用最佳实践，并且会为没有经验的人引入坏习惯（具体来说，它不包括 ng-model 中的“.”，这有助于避免潜在的问题 parent/child 范围问题。请参阅 link 中的表单示例以获得更可靠的方法。）

AngularJS dotnetnuke 7 开发模块中的表单

AngularJS form in develop module of dotnetnuke 7

javascript

dotnetnuke

angularjs