个人中心
gpt4 book ai didi

javascript - ng-click 在 MVC 局部 View 中不起作用

转载 作者：行者123 更新时间：2023-11-29 21:31:30 26 4
gpt4 key购买 nike

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

页面调用了两个局部 View :

  1. 菜单
  2. 帐户

菜单加载正常，当用户单击菜单项时，我使用 Angular ng-click 调用另一个局部 View ，并将局部 View 结果注入(inject)主页。

问题是无论我尝试什么，我在accounts 部分 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>&copy; @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)_Accounts 局部 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/

26 4 0
文章推荐： javascript - 解决 MainController 的 promise
文章推荐： android - 从以前的 ListView 打开一个新的 ListView
文章推荐： javascript - 单击按钮 - 显示内容，隐藏以前可见的内容
文章推荐： JavaScript:隐藏和显示菜单类
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com