ng单击无法在MVC部分视图中工作
ng-click not working in MVC partial view
我有一个使用angular.js和MVC的单页应用程序。
该页面调用两个部分视图：
- 菜单
- 账户
菜单加载良好，当用户单击菜单项时，我使用angular ng click调用另一个局部视图，并将局部视图结果注入主页面。
问题是无论我尝试什么，帐户部分视图上的ng点击事件都不会触发：
1）主SPA页面：
<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）_菜单部分视图：
@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）_账户部分视图：
@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>
我没有50的声誉来评论你的问题，但请先尝试将html添加到dom
$("#body").append(response);
然后按类或id获取元素并进行编译。
var el = angular.element('#account');
$compile(el)($scope);
如果这没有帮助，试试这个
$("#body").append($compile(angular.html(response).contents())($scope));
如果其他人也有同样的问题，我会这样做：
1）主SPA页面：
<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）_菜单部分视图：
@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）_账户部分视图：
@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>");
};
});
相关文章：
- Angular JS-视图不工作
- 单击'Backbone.js视图'不要工作
- MVC 分部视图中的 JQuery UI 自动完成功能只能工作一次
- 当htmlMode为true时，Summernote html代码视图与codemirror无法正常工作
- 如果未找到或未在ng视图外工作，则为ng
- 骨干视图渲染的工作原理
- 主干视图实例未按预期工作
- jQuery日期选择器在Firefox和IE的MVC部分视图上进行ajax更新后无法工作
- 部分html视图's控制器未使用KendoPanelBar内容URL在指令模板URL中工作
- ng单击无法在MVC部分视图中工作
- 将节点添加到 KendoUI 树视图无法按预期工作
- 主干木偶布局视图无法正常工作
- 快速单击会导致幻灯片视图无法正常工作
- 网格视图中的Checbox检查条件无法按JavaScript的要求工作
- 添加嵌套视图后代码停止工作
- BackboneJS 视图的函数绑定是如何工作的
- jQuery 手机间隙:- 列表视图中的自动分隔器是否正常工作
- UI 路由器不加载 rawgit 中的视图，但在本地工作
- 加载部分视图时引导折叠无法正常工作
- 骨干/木偶试图让附加视图工作
