dotnetnuke 7开发模块中的AngularJS形式

惠塔

我正在使用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 = '[email protected]';
    });
</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”标签的问题?

点网核

在DNN / ASP.NET Webforms中运行时,表单标记当然是一个问题。我在DNNHero.com做了一个有关Angular应用程序构建为DNN模块的教程

两点建议:

  1. 使用div标签添加角度控制器指令:

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在Dotnetnuke中丢失会话

如何从头开始开发DotNetNuke模块?

在DotNetNuke中禁用Telerik的功能

网页内容未显示在DotnetNuke的模块中

在DotNetNuke 8 MVC模块中包括StyleSheets

不可见的DotNetNuke实现模块

DNN(DotNetNuke)模块异常未记录

Dotnetnuke仅针对特定模块注入脚本

添加模块时出现DotNetNuke错误

在DotNetNuke网站中,如何绕过404错误?

恢复为DotNetNuke中的默认外观

DotNetNuke 9中的最佳实践MVC模块实例

dotnetnuke报告模块无法使用数据源设置

DotNetNuke将错误的模块添加到页面

DotNetNuke 7尝试创建站点时发生错误

如何暂时存储在DotNetNuke的7个数据?

DotNetNuke 7文件哪里去了?

在DOTNETNUKE中可用的内置视频流设施中?

向通过Dotnetnuke中的Facebook注册的用户添加角色

如何确定DotnetNuke的Globals.NavigateURL中的TabId和ModuleId?

如何在DotnetNuke中添加管理临时数据?

某些语言的网址中包含Dotnetnuke主页名称

如何在Dotnetnuke 7.0中添加规范标签

为什么我的 DotNetNuke 模块中的更改不会立即反映在客户端?

Dotnetnuke中的阿拉伯语本地化事件模块

处理DotNetNuke模块和皮肤的通用文件的最佳方法是什么?

如何在DotNetNuke(DNN)中只加载一次fancybox(JS已经包含在主题和模块中)

使用DotNetNuke中的Angular2在2sxc中访问webapi

有人在 DNN 9.9 版中实现了 DotNetNuke.Abstractions.Portals.IPortalAliasInfo.HttpAlias 吗?