Question

我正在尝试使用嵌套视图，登录后会将您从@model ATAS.Models.ViewModels.TimeCreditEntryViewModel @{ ViewBag.Title = "Create"; } @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <fieldset> <legend>Request to use time credit</legend> <div class="form-group"> <label class="col-md-2 control-label" for="AuthorisedEmployee">Who</label> <div class="col-md-2"> @Html.DropDownListFor(model => model.AuthorisedEmployee, Model.AuthorisedEmployee, "Select Employee", new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.AuthorisedEmployeeId) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.TimeCreditDate, new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.TextBoxFor(model => model.TimeCreditDate, new { @class = "datepicker", id = "vacation" }) @Html.ValidationMessageFor(model => model.TimeCreditDate) </div>r </div> <div class="form-group"> <label class="col-md-2 control-label" for="StationList">Where</label> <div class="col-md-2"> @Html.DropDownListFor(model => model.StationList, Model.StationList, "Choose Station", new { @class = "form-control" }) </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="Shift">Which</label> <div class="col-md-2"> @Html.DropDownList("Shift", new SelectList(string.Empty, "Value", "Text"), new { @class = "form-control" }) </div> </div> <div class="form-group"> <div class="col-lg-10 col-lg-offset-2"> <button class="btn btn-default" type="reset">Cancel</button> <button class="btn btn-primary" type="submit">Submit</button> </div> </div> </fieldset> </div> } <script src="~/Scripts/jquery-2.1.4.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.datepicker').datepicker() $("#Shift").prop("disabled", true); //Dropdownlist Selectedchange event $("#StationList").change(function () { $("#Shift").empty(); if ($("#StationList").val() != "") { $.ajax({ type: 'POST', url: '@Url.Action("GetShiftsByStation")', // we are calling json method dataType: 'json', data: { selectedValue: $("#StationList").val() }, // here we are get value of selected Station and passing same value as input to json method GetShifts. success: function (shiftList) { // states contains the JSON formatted list // of states passed from the controller $("#Shift").append('<option value="' + null + '">' + "Choose shift" + '</option>'); $.each(shiftList, function (i, shift) { $("#Shift").append('<option value="' + shift.Value + '">' + shift.Text + '</option>'); // here we are adding option for shifts $("#Shift").prop("disabled", false); }); }, error: function (ex) { alert('Failed to retrieve shifts.' + ex); } }); return false; } else { $("#Shift").empty(); $("#Shift").prop("disabled", true); } }) });发送到in.html，所有链接都链接到ui-view内的in.html。目前所有链接都转到“新”页面

的index.html

<!-- more HTML -->
<body ng-controller="MainController as main">
<!--<div id="loading"><span>Loading</span></div>-->

<div ui-view="default"></div>
</body>
<!-- more HTML -->

in.html

<a ui-sref="online">Online Users</a>
<div ui-view="main"></div>

app.js路线

var $td = $config.TPL_DIR;

$stateProvider
    .state('auth', {
        url: '/auth',
        views: {
            "default": {
                controller: 'AuthController as auth',
                templateUrl: $td + 'login.html'
            }
        }
    })
    .state('loggedin', {
        url: '/in',
        views: {
            "default": {
                templateUrl: $td + 'in.html'
            }
        }
    })
    .state('online', {
        url: '/online',
        views: {
            "main": {
                controller: 'OnlineController as online',
                templateUrl: $td + 'online.html'
            }
        }
    });

Answer 1

尝试制作一些子视图，然后从那里更改ui-view。像

这样的东西

.state('loggedin.another_view', {
    url: '',
    views: {
        "main": {
            templateUrl: $td + 'partial.html'
        }
    }
})

由于loggedin是父视图，当路由器查找main时，它将在视图的loggedin上下文中查找。它会将partial.html加载到您的视图中。

Answer 2

将状态更改为loggedin.online

.state('loggedin.online', {
        url: '/online',
        views: {
            "main": {
                controller: 'OnlineController as online',
                templateUrl: $td + 'online.html'
            }
        }
    });

将链接更改为

<a ui-sref=".online">Online Users</a>
<div ui-view="main"></div>

Angular UI-Router嵌套视图

2 个答案: