如何在视图渲染之前调用angularjs get方法调用

时间：2017-06-21 05:48:52

标签： c# angularjs asp.net-mvc

我正在尝试使用局部视图动态绑定菜单..这是正常工作但我想在视图渲染之前绑定菜单。

目前，它渲染局部视图和主视图，然后命中角度get方法。

AngularJs控制器：

app.controller('menuController', ['$scope', '$http', function ($scope, $http) {
    $scope.init = function () {
        angular.element(document).ready(function () {
            $scope.SiteMenu = [];
               $http.get('http://localhost:9585/admin/menulist').then(function (data) {
                   debugger;
                   if (data.data != "" && data.data != "1") {
                       $scope.SiteMenu = data.data;
                   }
                   else
                       window.location="/UserLogins/SignIn"
            },
              function (error) {
                  alert('Error');
              })
        });
        }
}]);

部分视图（_Layout.cshtml）：

<!DOCTYPE html>
<html ng-app="myApp1">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/JS/Module.js"></script>
    <script src="~/Scripts/JS/Service.js"></script>
    <script src="~/Scripts/JS/Controller.js"></script>

</head>
<body class="" style="">    
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div id="navbarid" class="collapse navbar-collapse">

                    <div ng-controller="menuController" ng-init="init()" ng-view>
                        <ul class="main-navigation">
                            <li class="dropdown" ng-repeat="menu in SiteMenu | filter : {ParentMenuId: 0}:true" ng-include="'treeMenu'"></li>
                            <li style="float:right;"><a href="../Userlogins/SignIn">Log Out</a></li>
                        </ul>
                        <script type="text/ng-template" id="treeMenu">
                            <a href="{{menu.Url}}">{{menu.Name}}</a>
                            <ul ng-if="(SiteMenu | filter : {ParentMenuId : menu.MenuItemId}:true).length > 0" style="line-height:1px;">

                                <li id="submenuitem" ng-repeat="menu in SiteMenu | filter : {ParentMenuId : menu.MenuItemId}:true" ng-include="'treeMenu'" style="border-bottom:1px solid white;"></li>
                            </ul>
                        </script>
                    </div>

            </div>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav"></ul>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()

    </div>

@RenderSection("Scripts", false)

我在另一个视图页面中包含了这个局部视图，在视图渲染后进行了角度js调用。我想在视图渲染之前调用angular js controller get方法$http.get('http://localhost:9585/admin/menulist')。

1 个答案:

答案 0 :(得分：0)

在加载时调用 $ scope.init 功能，如下所示

    app.controller('menuController', ['$scope', '$http', function ($scope, $http) {
        $scope.init = function () {
            angular.element(document).ready(function () {
                $scope.SiteMenu = [];
                   $http.get('http://localhost:9585/admin/menulist').then(function (data) {
                       debugger;
                       if (data.data != "" && data.data != "1") {
                           $scope.SiteMenu = data.data;
                       }
                       else
                           window.location="/UserLogins/SignIn"
                },
                  function (error) {
                      alert('Error');
                  })
            });
            }
 $scope.init(); //call function while loading controller
    }]);