问题描述
我在使用angular.js和MVC单页的应用程序。
该页面调用两个部分观点:
- 菜单
- 帐户
菜单加载罚款,当用户点击菜单项我采用了棱角分明调用另一个局部视图NG单击,在主页面注入局部视图的结果。
问题是关于我NG单击事件占部分观点将不会触发无论什么我尝试:
1)主要SPA页:
< HTML和GT;
< HEAD>
<间的charset =UTF-8/>
< META NAME =视口CONTENT =WIDTH =设备宽度,初始规模= 1.0>
<标题>&角LT; /标题>
@ Styles.Render(〜/内容/ CSS)
@ Scripts.Render(〜/包/ jQuery的)
@ Scripts.Render(〜/包/引导)
@ Scripts.Render(〜/包/ Modernizr的)
< /头>
<机身NG-应用=对myAppNG控制器=AppController的>
< DIV CLASS =导航栏导航栏,导航栏逆固定顶>
< DIV CLASS =容器>
< DIV CLASS =导航栏头>
<按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=&GTNavbar的崩溃。
<跨度类=图标栏>< / SPAN>
<跨度类=图标栏>< / SPAN>
<跨度类=图标栏>< / SPAN>
< /按钮>
@ Html.ActionLink(应用程序名称,索引,家,新{面积=},{新@class =Navbar的品牌})
< / DIV>
@ Html.Action(使用getMenu,菜单)
< / DIV>
< / DIV>
< DIV CLASS =行>
< DIV CLASS =COL-MD-2的风格=背景色:#428bca;高度:300像素;>< / DIV>
< DIV CLASS =COL-MD-8ID =身体>
< / DIV>
< DIV CLASS =COL-MD-2的风格=背景色:#428bca;高度:300像素;>< / DIV>
< / DIV>
<页脚GT&;
< P>&安培;复印件; @ DateTime.Now.Year< / P>
< /页脚>
< /身体GT;
< / HTML>
2)_Menu局部视图:
@model名单< DTO.Menu.NavMenuViewModel>< DIV CLASS =容器顶部空间长卷>
< DIV CLASS =导航栏导航栏默认导航栏固定顶角色=导航>
< DIV CLASS =容器>
< DIV CLASS =导航栏头>
<按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=&GTNavbar的崩溃。
<跨度类=SR-只有>拨动导航< / SPAN>
<跨度类=图标栏>< / SPAN>
<跨度类=图标栏>< / SPAN>
<跨度类=图标栏>< / SPAN>
< /按钮>
<一类=导航栏品牌的href =/>家庭和LT; / A>
< / DIV>
< DIV CLASS =导航栏崩崩>
@ {
的foreach(在型号VAR菜单项)
{
< UL类=NAV导航栏,导航>
<立GT;
@if(menuItem.Children = NULL&放大器;!&安培; menuItem.Children.Any())
{
< A HREF =#类=下拉菜单,切换数据切换=下拉菜单> @ menuItem.Parent.Name< B类=插入符号>< / B>< / A>
}
其他
{
&所述; A HREF =#> @ menuItem.Parent.Name&下; / A>
}
@if(menuItem.Children = NULL&放大器;!&安培; menuItem.Children.Any())
{
< UL类=下拉菜单中多层次的>
@foreach(在menuItem.Children VAR子)
{
<立GT;
< A HREF =#NG点击=导航($事件)> @ sub.ChildMenuName< / A>
< /李>
}
< / UL>
}
< /李>
< / UL>
}
< UL类=NAV导航栏,导航栏导航右>
<立GT;< A HREF =#类=Navbar的品牌> {{currentModule}}< / A>< /李>
< / UL>
}
< / DIV>
< / DIV>
< / DIV>
< / DIV><脚本类型=文/ JavaScript的>
VAR应用= angular.module('对myApp',[]);
app.controller('AppController的',函数($范围,$ HTTP,$编译){ 警报('加载的菜单控制器'); $ scope.Navigate =函数(事件){ $(#体),空()。 $ scope.currentModule =当前模块 - + event.target.innerHTML; $ http.get(/帐号/ GetAccounts)。成功(功能(响应){ $(#机构)附加(响应)。
VAR EL = angular.element('#账户');
$编译(EL)($范围内); })错误(功能(数据,状态,头,配置){
});
};
});
< / SCRIPT>
3)_accounts局部视图:
@model名单< DTO.Account>< DIV ID =帐户>
@foreach(以型号VAR帐户)
{
< DIV CLASS =行>
< DIV CLASS =COL-MD-2>
< A HREF =#NG点击=点击()>帐户号码:@ account.AccountNumber< / A>
< / DIV>
< DIV CLASS =COL-MD-2>帐户持有人:@ account.AccountHolderName< / DIV>
< / DIV>
}
< / DIV>
<脚本类型=文/ JavaScript的> 警报('装载帐户JS'); angular.module(对myApp)。控制器(AppController的功能($范围){ 警报('加载的账户控制器'); $ scope.Click =功能(){
警报(点击);
};
});
< / SCRIPT>
这是我做了什么得到它的工作,如果其他人是否有同样的问题:
1)SPA主页:
< HTML和GT;
< HEAD>
<间的charset =UTF-8/>
< META NAME =视口CONTENT =WIDTH =设备宽度,初始规模= 1.0>
@ Styles.Render(〜/内容/ CSS)
@ Scripts.Render(〜/包/ jQuery的)
@ Scripts.Render(〜/包/引导)
@ Scripts.Render(〜/包/ Modernizr的)
<脚本类型=文/ JavaScript的>
angular.module('对myApp',[]);
< / SCRIPT>
< /头>
<机身NG-应用=对myApp>
< DIV CLASS =导航栏导航栏,导航栏逆固定顶>
< DIV CLASS =容器>
< DIV CLASS =导航栏头>
<按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=&GTNavbar的崩溃。
<跨度类=图标栏>< / SPAN>
<跨度类=图标栏>< / SPAN>
<跨度类=图标栏>< / SPAN>
< /按钮>
< / DIV>
@ Html.Action(使用getMenu,菜单)
< / DIV>
< / DIV>
< DIV CLASS =行>
< DIV CLASS =COL-MD-2>
< DIV CLASS =行>
< DIV CLASS =COL-MD-12文本中心>
< H3>树视图PANEL< / H3 GT&;
< / DIV>
< / DIV>
< DIV CLASS =行>
< DIV CLASS =COL-MD-12ID =sidePannel> < / DIV>
< / DIV>
< / DIV>
< DIV CLASS =COL-MD-8ID =身体> < / DIV>
< DIV CLASS =COL-MD-2>
< / DIV>
< / DIV>
< /身体GT;
< / HTML>
2)_Menu局部视图:
@model名单< DTO.Menu.NavMenuViewModel>< DIV ID =mController级=容器顶部空间滚动NG控制器=menuController>
< DIV CLASS =导航栏导航栏默认导航栏固定顶角色=导航>
< DIV CLASS =容器>
< DIV CLASS =导航栏头>
<按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=&GTNavbar的崩溃。
<跨度类=SR-只有>拨动导航< / SPAN>
<跨度类=图标栏>< / SPAN>
<跨度类=图标栏>< / SPAN>
<跨度类=图标栏>< / SPAN>
< /按钮>
<一类=导航栏品牌的href =/> SASFIN BFS - 在线和LT; / A>
< / DIV>
< DIV CLASS =导航栏崩崩>
@ {
的foreach(在型号VAR菜单项)
{
< UL类=NAV导航栏,导航>
<立GT;
@if(menuItem.Children = NULL&放大器;!&安培; menuItem.Children.Any())
{
< A HREF =#类=下拉菜单,切换数据切换=下拉菜单> @ menuItem.Parent.Name< B类=插入符号>< / B>< / A>
}
其他
{
&所述; A HREF =#> @ menuItem.Parent.Name&下; / A>
}
@if(menuItem.Children = NULL&放大器;!&安培; menuItem.Children.Any())
{
< UL类=下拉菜单中多层次的>
@foreach(在menuItem.Children VAR子)
{
<立GT;
< A HREF =#NG点击=导航($事件)> @ sub.ChildMenuName< / A>
< /李>
}
< / UL>
}
< /李>
< / UL>
}
< UL类=NAV导航栏,导航栏导航右>
<立GT;< A HREF =#类=Navbar的品牌> {{currentModule}}< / A>< /李>
< / UL>
}
< / DIV>
< / DIV>
< / DIV>
< / DIV>
<脚本SRC =〜/脚本/自定义/ menu.js>< / SCRIPT>
<脚本SRC =〜/脚本/自定义/ accounts.js>< / SCRIPT>
3)_account局部视图:
@model名单< DTO.Account>< DIV ID =账户NG控制器=accountsController>
@foreach(以型号VAR帐户)
{
< DIV CLASS =行>
< DIV CLASS =COL-MD-2>
< A HREF =#NG点击=点击($事件)>帐户号码:@ account.AccountNumber< / A>
< / DIV>
< DIV CLASS =COL-MD-2>帐户持有人:@ account.AccountHolderName< / DIV>
< / DIV>
<小时/>
< BR />
}
< / DIV>
4)menu.js:
angular.module(对myApp)。控制器('menuController',函数($范围,$ HTTP,$编译){ $ scope.activateView =功能(HTML){
$编译(html.contents())($范围内); 如果(!$范围。$$相)
$ $范围适用于()。
}; $ scope.Navigate =函数(事件){ $(#体),空()。
$(#机构)HTML(< IMG SRC =/图像/ loading.gif'ID ='装载机'/>中) $(#sidePannel),空(); $ scope.currentModule =当前模块 - + event.target.innerHTML; $ http.get(/帐号/ GetAccounts)。成功(功能(响应){ VAR体= angular.element(的document.getElementById(身体));
$(#体),空()。
body.html(响应); 变种mController = angular.element(的document.getElementById(mController));
。mController.scope()activateView(体);
$(#装载机),隐藏()。 })错误(功能(数据,状态,头,配置){
$(#体),空()。
});
};});
5)account.js:
angular.module(对myApp)。控制器(accountsController功能($范围){ $ scope.Click =函数(事件){
VAR accNumber = event.target.innerHTML;
$(#sidePannel),空();
$(#sidePannel)追加(< B>中+ accNumber +< / B>中);
};});
I have a single page application using angular.js and MVC.
The page calls two partial views:
- Menu
- Accounts
Menu loads fine and when the user clicks a menu item I call another partial view using angular ng-click and inject the partial view result in the main page.
The problem is my ng-click event on the accounts partial view will not fire no matter what i try:
1)Main SPA page:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/modernizr")
</head>
<body ng-app="myApp" ng-controller="appController">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
@Html.Action("GetMenu", "Menu")
</div>
</div>
<div class="row">
<div class="col-md-2" style="background-color:#428bca;height:300px;"></div>
<div class="col-md-8" id="body">
</div>
<div class="col-md-2" style="background-color:#428bca;height:300px;"></div>
</div>
<footer>
<p>© @DateTime.Now.Year</p>
</footer>
</body>
</html>
2)_Menu partial view:
@model List<DTO.Menu.NavMenuViewModel>
<div class="container top-space scroll">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Home</a>
</div>
<div class="collapse navbar-collapse">
@{
foreach (var menuItem in Model)
{
<ul class="nav navbar-nav">
<li>
@if (menuItem.Children != null && menuItem.Children.Any())
{
<a href="#" class="dropdown-toggle" data-toggle="dropdown">@menuItem.Parent.Name<b class="caret"></b></a>
}
else
{
<a href="#">@menuItem.Parent.Name</a>
}
@if (menuItem.Children != null && menuItem.Children.Any())
{
<ul class="dropdown-menu multi-level">
@foreach (var sub in menuItem.Children)
{
<li>
<a href="#" ng-click="Navigate($event)">@sub.ChildMenuName</a>
</li>
}
</ul>
}
</li>
</ul>
}
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="navbar-brand">{{currentModule}}</a></li>
</ul>
}
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('appController', function ($scope, $http, $compile) {
alert('loaded the menu controller');
$scope.Navigate = function (event) {
$("#body").empty();
$scope.currentModule = "Current module - " + event.target.innerHTML;
$http.get("/Account/GetAccounts").success(function (response) {
$("#body").append(response);
var el = angular.element('#accounts');
$compile(el)($scope);
}).error(function (data, status, headers, config) {
});
};
});
</script>
3)_Accounts partial view:
@model List<DTO.Account>
<div id="accounts">
@foreach (var account in Model)
{
<div class="row">
<div class="col-md-2">
<a href="#" ng-click="Click()">Account number: @account.AccountNumber</a>
</div>
<div class="col-md-2">Account holder: @account.AccountHolderName</div>
</div>
}
</div>
<script type="text/javascript">
alert('loading accounts js');
angular.module("myApp").controller("appController", function ($scope) {
alert('loaded the accounts controller');
$scope.Click = function () {
alert("click");
};
});
</script>
This is what I've done to get it working if anyone else is having the same problem:
1)Main SPA Page:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/modernizr")
<script type="text/javascript">
angular.module('myApp', []);
</script>
</head>
<body ng-app="myApp">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
@Html.Action("GetMenu", "Menu")
</div>
</div>
<div class="row">
<div class="col-md-2">
<div class="row">
<div class="col-md-12 text-center">
<h3>TREE VIEW PANEL</h3>
</div>
</div>
<div class="row">
<div class="col-md-12" id="sidePannel">
</div>
</div>
</div>
<div class="col-md-8" id="body">
</div>
<div class="col-md-2">
</div>
</div>
</body>
</html>
2)_Menu partial view:
@model List<DTO.Menu.NavMenuViewModel>
<div id="mController" class="container top-space scroll" ng-controller="menuController">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">SASFIN BFS - ONLINE</a>
</div>
<div class="collapse navbar-collapse">
@{
foreach (var menuItem in Model)
{
<ul class="nav navbar-nav">
<li>
@if (menuItem.Children != null && menuItem.Children.Any())
{
<a href="#" class="dropdown-toggle" data-toggle="dropdown">@menuItem.Parent.Name<b class="caret"></b></a>
}
else
{
<a href="#">@menuItem.Parent.Name</a>
}
@if (menuItem.Children != null && menuItem.Children.Any())
{
<ul class="dropdown-menu multi-level">
@foreach (var sub in menuItem.Children)
{
<li>
<a href="#" ng-click="Navigate($event)">@sub.ChildMenuName</a>
</li>
}
</ul>
}
</li>
</ul>
}
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="navbar-brand">{{currentModule}}</a></li>
</ul>
}
</div>
</div>
</div>
</div>
<script src="~/Scripts/Custom/menu.js"></script>
<script src="~/Scripts/Custom/accounts.js"></script>
3)_Account partial view:
@model List<DTO.Account>
<div id="accounts" ng-controller="accountsController">
@foreach (var account in Model)
{
<div class="row">
<div class="col-md-2">
<a href="#" ng-click="Click($event)">Account number: @account.AccountNumber</a>
</div>
<div class="col-md-2">Account holder: @account.AccountHolderName</div>
</div>
<hr />
<br />
}
</div>
4)menu.js:
angular.module("myApp").controller('menuController', function ($scope, $http, $compile) {
$scope.activateView = function (html) {
$compile(html.contents())($scope);
if (!$scope.$$phase)
$scope.$apply();
};
$scope.Navigate = function (event) {
$("#body").empty();
$("#body").html("<img src='/Images/loading.gif' id='loader' />")
$("#sidePannel").empty();
$scope.currentModule = "Current module - " + event.target.innerHTML;
$http.get("/Account/GetAccounts").success(function (response) {
var body = angular.element(document.getElementById("body"));
$("#body").empty();
body.html(response);
var mController = angular.element(document.getElementById("mController"));
mController.scope().activateView(body);
$("#loader").hide();
}).error(function (data, status, headers, config) {
$("#body").empty();
});
};
});
5)account.js:
angular.module("myApp").controller("accountsController", function ($scope) {
$scope.Click = function (event) {
var accNumber = event.target.innerHTML;
$("#sidePannel").empty();
$("#sidePannel").append("<b>" + accNumber + "</b>");
};
});
这篇关于NG-单击MVC局部视图不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!