2016-06-27 3 views
3

Я использую angularJS в пользовательском элементе управления asp.net (UC), но, к сожалению, когда я пытаюсь добавить свой UC на свою страницу, вся страница страницы, использующая угловые остановки, работает. Я попытался использовать угловую ссылку отдельно от UC и страницы, но не успел.asp net user control with angularjs

Код страницы:

<%@ 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

Я сделал свой пример работы с этими изменениями:

  1. Переместить скрипт для вызова AngularJS на страницу Abc.aspx.
  2. Установить в теге BODY ng-app = "приложение" и удалить его из div в вашем элементе управления пользователя.
  3. Добавьте скрипт, чтобы создать свой модуль углового приложения.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Abc.aspx.cs" Inherits="angularusercontrol.Abc" %> <%@ 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>