ng-click在MVC局部视图中不起作用

我有一个使用angular.js和MVC的单页面应用程序。

该页面调用两个部分视图：

1. 菜单
2. 帐号

菜单加载正常，当用户单击菜单项时，我使用角度ng单击调用另一个局部视图，并在主页面中注入局部视图结果。

问题是，无论我尝试什么，我的帐户部分视图上的ng-click事件都不会触发：

1）主SPA页面：

     @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/modernizr")   
 
 
      @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
 @Html.Action("GetMenu", "Menu") 
 
 
 
 
 
 
 
 
 
© @DateTime.Now.Year
 
   

2）_Menu局部视图：

 @model List 
 
 
 
  Toggle navigation     Home 
 
 @{ foreach (var menuItem in Model) { 
 
 @if (menuItem.Children != null && menuItem.Children.Any()) { @menuItem.Parent.Name } else { @menuItem.Parent.Name } @if (menuItem.Children != null && menuItem.Children.Any()) { 
 @foreach (var sub in menuItem.Children) { 
 @sub.ChildMenuName 
 } 
 } 
 
 } 
 
{{currentModule}}
 
 } 
 
 
 
  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) { }); }; });  

3）_Accounts局部视图：

 @model List 
 @foreach (var account in Model) { 
 
 Account number: @account.AccountNumber 
 
Account holder: @account.AccountHolderName
 
 } 
  alert('loading accounts js'); angular.module("myApp").controller("appController", function ($scope) { alert('loaded the accounts controller'); $scope.Click = function () { alert("click"); }; });  

Answer 1

我没有50个声誉来评论你的问题，但首先尝试将html添加到dom

 $("#body").append(response); 

然后按类或id获取元素并编译。

 var el = angular.element('#account'); $compile(el)($scope); 

如果这没有帮助尝试这个

 $("#body").append($compile(angular.html(response).contents())($scope)); 

Answer 2

如果其他人遇到同样的问题，我就是这样做的。

1）主SPA页面：

     @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/modernizr")    
 
 
      
 @Html.Action("GetMenu", "Menu") 
 
 
 
 
 
 
TREE VIEW PANEL
 
 
 
 
 
 
 
 
 
 
 
 
   

2）_Menu局部视图：

 @model List 
 
 
 
  Toggle navigation     SASFIN BFS - ONLINE 
 
 @{ foreach (var menuItem in Model) { 
 
 @if (menuItem.Children != null && menuItem.Children.Any()) { @menuItem.Parent.Name } else { @menuItem.Parent.Name } @if (menuItem.Children != null && menuItem.Children.Any()) { 
 @foreach (var sub in menuItem.Children) { 
 @sub.ChildMenuName 
 } 
 } 
 
 } 
 
{{currentModule}}
 
 } 
 
 
 
   

3）_Account局部视图：

 @model List 
 @foreach (var account in Model) { 
 
 Account number: @account.AccountNumber 
 
Account holder: @account.AccountHolderName
 
 
 
 }  

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("") $("#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("" + accNumber + ""); }; });