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>
