Question

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

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

菜单
帐户

菜单加载正常，当用户点击菜单项时，我使用角度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>&copy; @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 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>

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页面：

<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）_Account partial view：

@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在MVC局部视图中不起作用

2 个答案: