我有一个使用 angular.js 和 MVC 的单页面应用程序。
页面调用两个部分 View :
- 菜单
- 帐户
菜单加载正常，当用户单击菜单项时，我使用 Angular ng-click 调用另一个部分 View ，并将部分 View 结果注入(inject)主页。
问题是无论我尝试什么，我在帐户部分 View 上的 ng-click 事件都不会触发:
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)_菜单部分 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)_帐户部分 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>
最佳答案
我没有 50 声望来评论你的问题，但首先尝试将 html 添加到 dom
$("#body").append(response);
然后通过类或id获取元素并编译。
var el = angular.element('#account');
$compile(el)($scope);
如果这没有帮助，请尝试这个
$("#body").append($compile(angular.html(response).contents())($scope));
关于javascript - ng-click 在 MVC 部分 View 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36239097/