NG-单击MVC局部视图不工作 [英] ng-click not working in MVC partial view

查看:109
本文介绍了NG-单击MVC局部视图不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在使用angular.js和MVC单页的应用程序。

该页面调用两个部分观点:


  1. 菜单

  2. 帐户

菜单加载罚款,当用户点击菜单项我采用了棱角分明调用另一个局部视图NG单击,在主页面注入局部视图的结果。

问题是关于我NG单击事件占部分观点将不会触发无论什么我尝试:

1)主要SPA页:

 < HTML和GT;
< HEAD>
    <间的charset =UTF-8/>
    < META NAME =视口CONTENT =WIDTH =设备宽度,初始规模= 1.0>
    <标题>&角LT; /标题>
    @ Styles.Render(〜/内容/ CSS)
    @ Scripts.Render(〜/包/ jQuery的)
    @ Scripts.Render(〜/包/引导)
    @ Scripts.Render(〜/包/ Modernizr的)
< /头>
<机身NG-应用=对myAppNG控制器=AppController的>
    < D​​IV CLASS =导航栏导航栏,导航栏逆固定顶>
        < D​​IV CLASS =容器>
            < D​​IV CLASS =导航栏头>
                <按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=&GTNavbar的崩溃。
                    <跨度类=图标栏>< / SPAN>
                    <跨度类=图标栏>< / SPAN>
                    <跨度类=图标栏>< / SPAN>
                < /按钮>
                @ Html.ActionLink(应用程序名称,索引,家,新{面积=},{新@class =Navbar的品牌})
            < / DIV>
            @ Html.Action(使用getMenu,菜单)
        < / DIV>
    < / DIV>
    < D​​IV CLASS =行>
        < D​​IV CLASS =COL-MD-2的风格=背景色:#428bca;高度:300像素;>< / DIV>
        < D​​IV CLASS =COL-MD-8ID =身体>
        < / DIV>
        < D​​IV CLASS =COL-MD-2的风格=背景色:#428bca;高度:300像素;>< / DIV>
    < / DIV>
    <页脚GT&;
        < P>&安培;复印件; @ DateTime.Now.Year< / P>
    < /页脚>
< /身体GT;
< / HTML>

2)_Menu局部视图:

  @model名单< D​​TO.Menu.NavMenuViewModel>< D​​IV CLASS =容器顶部空间长卷>
    < D​​IV CLASS =导航栏导航栏默认导航栏固定顶角色=导航>
        < D​​IV CLASS =容器>
            < D​​IV CLASS =导航栏头>
                <按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=&GTNavbar的崩溃。
                    <跨度类=SR-只有>拨动导航< / SPAN>
                    <跨度类=图标栏>< / SPAN>
                    <跨度类=图标栏>< / SPAN>
                    <跨度类=图标栏>< / SPAN>
                < /按钮>
                <一类=导航栏品牌的href =/>家庭和LT; / A>
            < / DIV>
            < D​​IV CLASS =导航栏崩崩>
                @ {
                    的foreach(在型号VAR菜单项)
                    {
                        < UL类=NAV导航栏,导航>
                            <立GT;
                                @if(menu​​Item.Children = NULL&放大器;!&安培; menuItem.Children.Any())
                                {
                                    < A HREF =#类=下拉菜单,切换数据切换=下拉菜单> @ menuItem.Parent.Name< B类=插入符号>< / B>< / A>
                                }
                                其他
                                {
                                    &所述; A HREF =#> @ menuItem.Parent.Name&下; / A>
                                }
                                @if(menu​​Item.Children = NULL&放大器;!&安培; menuItem.Children.Any())
                                {
                                    < UL类=下拉菜单中多层次的>
                                        @foreach(在menuItem.Children VAR子)
                                        {
                                            <立GT;
                                                < A HREF =#NG点击=导航($事件)> @ sub.ChildMenuName< / A>
                                            < /李>
                                        }
                                    < / UL>
                                }
                            < /李>
                        < / UL>
                    }
                    < UL类=NAV导航栏,导航栏导航右>
                        <立GT;< A HREF =#类=Navbar的品牌> {{currentModule}}< / A>< /李>
                    < / UL>
                }
            < / DIV>
        < / DIV>
    < / DIV>
< / DIV><脚本类型=文/ JavaScript的>
    VAR应用= angular.module('对myApp',[]);
    app.controller('AppController的',函数($范围,$ HTTP,$编译){        警报('加载的菜单控制器');        $ scope.Navigate =函数(事件){            $(#体),空()。            $ scope.currentModule =当前模块 - + event.target.innerHTML;            $ http.get(/帐号/ GetAccounts)。成功(功能(响应){                $(#机构)附加(响应)。
                VAR EL = angular.element('#账户');
                $编译(EL)($范围内);            })错误(功能(数据,状态,头,配置){
            });
        };
    });
< / SCRIPT>

3)_accounts局部视图:

  @model名单< D​​TO.Account>< D​​IV ID =帐户>
    @foreach(以型号VAR帐户)
    {
        < D​​IV CLASS =行>
            < D​​IV CLASS =COL-MD-2>
                < A HREF =#NG点击=点击()>帐户号码:@ account.AccountNumber< / A>
            < / DIV>
            < D​​IV CLASS =COL-MD-2>帐户持有人:@ account.AccountHolderName< / DIV>
        < / DIV>
    }
< / DIV>
<脚本类型=文/ JavaScript的>    警报('装载帐户JS');    angular.module(对myApp)。控制器(AppController的功能($范围){        警报('加载的账户控制器');        $ scope.Click =功能(){
            警报(点击);
        };
    });
< / SCRIPT>


解决方案

这是我做了什么得到它的工作,如果其他人是否有同样的问题:

1)SPA主页:

 < HTML和GT;
< HEAD>
    <间的charset =UTF-8/>
    < META NAME =视口CONTENT =WIDTH =设备宽度,初始规模= 1.0>
    @ Styles.Render(〜/内容/ CSS)
    @ Scripts.Render(〜/包/ jQuery的)
    @ Scripts.Render(〜/包/引导)
    @ Scripts.Render(〜/包/ Modernizr的)
    <脚本类型=文/ JavaScript的>
        angular.module('对myApp',[]);
    < / SCRIPT>
< /头>
<机身NG-应用=对myApp>
    < D​​IV CLASS =导航栏导航栏,导航栏逆固定顶>
        < D​​IV CLASS =容器>
            < D​​IV CLASS =导航栏头>
                <按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=&GTNavbar的崩溃。
                    <跨度类=图标栏>< / SPAN>
                    <跨度类=图标栏>< / SPAN>
                    <跨度类=图标栏>< / SPAN>
                < /按钮>
            < / DIV>
            @ Html.Action(使用getMenu,菜单)
        < / DIV>
    < / DIV>
    < D​​IV CLASS =行>
        < D​​IV CLASS =COL-MD-2>
            < D​​IV CLASS =行>
                < D​​IV CLASS =COL-MD-12文本中心>
                   < H3>树视图PANEL< / H3 GT&;
                < / DIV>
            < / DIV>
            < D​​IV CLASS =行>
                < D​​IV CLASS =COL-MD-12ID =sidePannel>                < / DIV>
            < / DIV>
        < / DIV>
        < D​​IV CLASS =COL-MD-8ID =身体>        < / DIV>
        < D​​IV CLASS =COL-MD-2>
        < / DIV>
    < / DIV>
< /身体GT;
< / HTML>

2)_Menu局部视图:

  @model名单< D​​TO.Menu.NavMenuViewModel>< D​​IV ID =mController级=容器顶部空间滚动NG控制器=menuController>
    < D​​IV CLASS =导航栏导航栏默认导航栏固定顶角色=导航>
        < D​​IV CLASS =容器>
            < D​​IV CLASS =导航栏头>
                <按钮式=按钮级=Navbar的切换数据切换=崩溃数据目标=&GTNavbar的崩溃。
                    <跨度类=SR-只有>拨动导航< / SPAN>
                    <跨度类=图标栏>< / SPAN>
                    <跨度类=图标栏>< / SPAN>
                    <跨度类=图标栏>< / SPAN>
                < /按钮>
                <一类=导航栏品牌的href =/> SASFIN BFS - 在线和LT; / A>
            < / DIV>
            < D​​IV CLASS =导航栏崩崩>
                @ {
                    的foreach(在型号VAR菜单项)
                    {
                        < UL类=NAV导航栏,导航>
                            <立GT;
                                @if(menu​​Item.Children = NULL&放大器;!&安培; menuItem.Children.Any())
                                {
                                    < A HREF =#类=下拉菜单,切换数据切换=下拉菜单> @ menuItem.Parent.Name< B类=插入符号>< / B>< / A>
                                }
                                其他
                                {
                                    &所述; A HREF =#> @ menuItem.Parent.Name&下; / A>
                                }
                                @if(menu​​Item.Children = NULL&放大器;!&安培; menuItem.Children.Any())
                                {
                                    < UL类=下拉菜单中多层次的>
                                        @foreach(在menuItem.Children VAR子)
                                        {
                                            <立GT;
                                                < A HREF =#NG点击=导航($事件)> @ sub.ChildMenuName< / A>
                                            < /李>
                                        }
                                    < / UL>
                                }
                            < /李>
                        < / UL>
                    }
                    < UL类=NAV导航栏,导航栏导航右>
                        <立GT;< A HREF =#类=Navbar的品牌> {{currentModule}}< / A>< /李>
                    < / UL>
                }
            < / DIV>
        < / DIV>
    < / DIV>
< / DIV>
<脚本SRC =〜/脚本/自定义/ menu.js>< / SCRIPT>
<脚本SRC =〜/脚本/自定义/ accounts.js>< / SCRIPT>

3)_account局部视图:

  @model名单< D​​TO.Account>< D​​IV ID =账户NG控制器=accountsController>
    @foreach(以型号VAR帐户)
    {
        < D​​IV CLASS =行>
            < D​​IV CLASS =COL-MD-2>
                < A HREF =#NG点击=点击($事件)>帐户号码:@ account.AccountNumber< / A>
            < / DIV>
            < D​​IV CLASS =COL-MD-2>帐户持有人:@ account.AccountHolderName< / DIV>
        < / DIV>
        <小时/>
        < BR />
    }
< / DIV>

4)menu.js:

  angular.module(对myApp)。控制器('menuController',函数($范围,$ HTTP,$编译){    $ scope.activateView =功能(HTML){
        $编译(html.contents())($范围内);        如果(!$范围。$$相)
            $ $范围适用于()。
    };    $ scope.Navigate =函数(事件){        $(#体),空()。
        $(#机构)HTML(< IMG SRC =/图像/ loading.gif'ID ='装载机'/>中)        $(#sidePannel),空();        $ scope.currentModule =当前模块 - + event.target.innerHTML;        $ http.get(/帐号/ GetAccounts)。成功(功能(响应){            VAR体= angular.element(的document.getElementById(身体));
            $(#体),空()。
            body.html(响应);            变种mController = angular.element(的document.getElementById(mController));
            。mController.scope()activateView(体);
            $(#装载机),隐藏()。        })错误(功能(数据,状态,头,配置){
            $(#体),空()。
        });
    };});

5)account.js:

  angular.module(对myApp)。控制器(accountsController功能($范围){    $ scope.Click =函数(事件){
        VAR accNumber = event.target.innerHTML;
        $(#sidePannel),空();
        $(#sidePannel)追加(< B>中+ accNumber +< / B>中);
    };});

I have a single page application using angular.js and MVC.

The page calls two partial views:

  1. Menu
  2. 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>&copy; @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>

解决方案

This is what I've done to get it working if anyone else is having the same problem:

1)Main SPA Page:

<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 partial view:

@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-单击MVC局部视图不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆