使用angularjs进行asp网络用户控制

时间:2016-06-27 15:25:25

标签: asp.net angularjs user-controls

我在asp.net用户控件(UC)中使用angularJS,但不幸的是,当我尝试在我的页面中添加我的UC时,使用角度的整个页面部分停止工作。 我尝试使用与UC和页面分开的角度引用,但没有成功。

网页代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Abc.aspx.cs" Inherits="WebApplication1.Abc" %>
<%@ Register Src="~/filterUC.ascx" TagPrefix="uc1" TagName="filterUC" %>


<!doctype html>
<html>
<head>
</head>
<body>
    <uc1:filterUC runat="server" ID="filterUC" />
    <div>
      <label>Name:</label>
      <input type="text" ng-model="myModel" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{myModel}}!</h1>
    </div>    
</body>
</html>

UC代码:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="filterUC.ascx.cs" Inherits="WebApplication1.filterUC" %>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
</div>

我怎样才能完成它?

问候。

1 个答案:

答案 0 :(得分:1)

我让你的例子适用于这些变化:

  1. 移动脚本以调用AngularJS进入页面Abc.aspx。
  2. <body>代码ng-app="app"中进行设置,然后将其从用户控件中的div中删除。
  3. 添加脚本以创建Angular应用模块。
  4.      <%@ Register Src="~/Controls/filterUC.ascx" TagPrefix="uc1" TagName="filterUC" %>
        <!DOCTYPE html>
        <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">
        </script>
        <script>
            angular.module('app', []);
        </script>
        </head>
        <body ng-app="app">
        <div>
          <label>Name:</label>
          <input id="input1" type="text" ng-model="myModel" placeholder="Enter a name here">
          <hr>
          <h1>Hello {{myModel}}!</h1>
        </div>
        <uc1:filterUC runat="server" id="filterUC" />
        </body>
        </html>