[英]ng-click not working in MVC partial view
我有一個使用 angular.js 和 MVC 的單頁應用程序。
頁面調用兩個局部視圖：
菜單加載正常，當用戶單擊菜單項時，我使用 angular ng-click 調用另一個局部視圖並將局部視圖結果注入主頁。
問題是無論我嘗試什么，我在帳戶部分視圖上的 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)_Menu局部視圖：
@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 局部視圖：
@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)_Menu局部視圖：
@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>");
};
});
使用兩個不同的控制器文件時，局部視圖ng-click不起作用
[英]Partial view ng-click not working when using two different controller files
AngularJS ng-view，ng-click和routerProvider不能一起工作
[英]AngularJS ng-view, ng-click and routerProvider not working together
AngularJs ng-click在jQuery可測網格視圖中不起作用
[英]AngularJs ng-click not working in jquery dynatable grid view
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.