在webform中作为局部的Angular视图模板
angular view template as partial in webform
在使用WebForm引擎的。aspx页面中<%..%>语法中,我将Angular .html模板作为partial包含进来。. aspx有许多服务器端控件,如
WebForm (. aspx)
<div class="row">
<div class="col-md-12 col-sm-12">
<%-- to be removed --%>
<div style="display:none">
<uc:FaciltyServiceRole ID="FSR" runat="server" ShowFacility="false" />
</div>
<%--*********** inject Angular app and partial ***********--%>
<div ng-app="ufsrAppModule">
<%--ng-include require "single quote 'some file' inside double quote"--%>
<div ng-include="'ngApps/fsrCascadeDropdown.html'"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<p>
<label for="<%:Scheduled_Date.ClientID %>">*Scheduled Date:</label>
</p>
</div>
<div class="col-md-3 col-sm-3">
<asp:TextBox ID="Scheduled_Date" runat="server" CssClass="Scheduled_Date form-control" Enabled="False"></asp:TextBox>
</div>
<div class="col-md-5 col-sm-5">
<asp:RequiredFieldValidator ID="valReqCallDate" ControlToValidate="Scheduled_Date" runat="server" ErrorMessage="Scheduled Date is required">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator runat="server" ID="valRegExCallDate" ErrorMessage="Please enter a valid date" ValidationExpression="^(((0?[1-9]|1[012])/(0?[1-9]|1'd|2[0-8])|(0?[13456789]|1[012])/(29|30)|(0?[13578]|1[02])/31)/(19|[2-9]'d)'d{2}|0?2/29/((19|[2-9]'d)(0[48]|[2468][048]|[13579][26])|(([2468][048]|[3579][26])00)))$"
ControlToValidate="Scheduled_Date">*</asp:RegularExpressionValidator>
</div>
</div>
Angular模板Partial (.Html)
<div ng-controller="ufsrController as ufsrCtrl">
<div class="container" ng-disabled="ufsrCtrl.disableFSR == 'true'">
<div class="row">
<div class="widget-body">
<div class="col-md-6 col-sm-6">
<div class="row" ng-show="ufsrCtrl.showFacility">
<div class="col-md-4 col-sm-4">
<label class="form-label">Facility:</label>
</div>
<div class="col-md-6 col-sm-6">
<select ng-model="ufsrCtrl.facility" name="facility" ng-options="fac.FacilityID as fac.FacilityName for fac in ufsrCtrl.facilities" ng-disabled="(ufsrCtrl.facilities === undefined || ufsrCtrl.facilities.length <= 0)" ng-change="ufsrCtrl.facilityChanged()"
class="form-control"></select>
</div>
<div class="col-md-1 col-sm-1">
<i ng-show="ufsrCtrl.facilities === undefined || ufsrCtrl.facilities.length <= 0" class="fa fa-refresh fa-spin"></i>
</div>
</div>
<div class="row">
<input type="text" name="service" ng-model="ufsrCtrl.service.ServiceName" style="display:none" />
<div class="col-md-4 col-sm-4">
<label class="form-label">Service:</label>
</div>
<div class="col-md-6 col-sm-6">
<select ng-model="ufsrCtrl.service" name="serviceId" ng-options="item.ServiceName for item in ufsrCtrl.services track by item.ServiceID " ng-disabled="(ufsrCtrl.services === undefined || ufsrCtrl.services.length <= 0)" ng-change="ufsrCtrl.serviceChanged()"
class="form-control">
<option value="">-- Choose Service --</option>
</select>
</div>
<div class="col-md-1 col-sm-1">
<i ng-show="ufsrCtrl.services === undefined || ufsrCtrl.services.length <= 0" class="fa fa-refresh fa-spin"></i>
</div>
</div>
<div class="row">
<input type="text" name="role" ng-model="ufsrCtrl.role.RoleName" style="display:none" />
<div class="col-md-4 col-sm-4">
<label class="form-label">Role:</label>
</div>
<div class="col-md-6 col-sm-6">
<select ng-model="ufsrCtrl.role" name="roleId" ng-options="item.RoleName for item in ufsrCtrl.roles track by item.FacilityServiceRoleID" ng-disabled="(ufsrCtrl.roles === undefined || ufsrCtrl.roles.length <= 0)" ng-change="ufsrCtrl.roleChanged()" class="form-control">
<option value="">-- Choose Role --</option>
</select>
</div>
<div class="col-md-1 col-sm-1" title="select a Service to dismiss me">
<i ng-show="ufsrCtrl.roles === undefined || ufsrCtrl.roles.length <= 0" class="fa fa-refresh fa-spin"></i>
</div>
</div>
</div>
</div>
</div>
我最终使用javascript根据它们的id找到angular下拉列表,获取它们的值并更新一些隐藏的post输入。它可能不太优雅,但很有效。
相关文章:
- 加载Angular视图后加载外部脚本
- 将数据从MVC控制器传递到Angular视图,而不在最终的html中显示数据值
- 为什么Angular视图中的数组表达式不起作用
- 如何在 Global.asax 中获取 Angular 视图的完整 URL
- 我的Angular视图没有用数据表单服务器更新
- 谷歌地图API在Angular视图中不起作用
- Angular视图在ng-click上没有正确更新
- 模型更改后,Angular视图不更新
- 如何在angular视图中显示返回的json
- 如何在angular视图中从文本中读取解析JSON
- Angular-视图未加载
- 在Angular视图中下拉值
- 当使用splice from指令时,Angular视图不会更新
- 在ngDialog中提交表单后,Angular视图不会在作用域改变时更新
- Angular视图没有加载,但控制器加载了
- 当模型改变时,Angular视图(DOM元素)没有更新
- 如果angular视图直接访问服务,这是一个好习惯吗?
- 在webform中作为局部的Angular视图模板
- Data-src标签在index.html中工作,但在angular视图中不起作用
- Angular视图没有加载