Question

我有像这样提到的州

 $stateProvider
        .state('dashboard', {
            url: "/dashboard",
            views: {
                content: { templateUrl: "/dashboard/index" }
            }
        }).state('accounts', {
            url: "/accounts",
            views: {
                'content': { templateUrl: "/accounts/index" }
            }
        })
        .state('accounts.add', {
            url: "/add",
            views: {
                'content': { templateUrl: "/accounts/add" }
            }
        });

和URLS

<a class="list-group-item submenu" ui-sref="accounts">Service Users</a>
<a class="list-group-item submenu" ui-sref="accounts.add">Add User</a>

我正在使用asp.net Mvc，所以我的Controller服务模板目前看起来像这样

 public class AccountsController : Controller
{
    //
    // GET: /Accounts/
    public ActionResult Index()
    {
        return Request.IsAjaxRequest() ? (ActionResult)PartialView("_Icons") : View();
    }   

    public ActionResult Add()
    {
        return Request.IsAjaxRequest() ? (ActionResult)PartialView("_Add") : View();
    }
}

但每当我向状态accounts.add发出请求时，它始终会调用accounts状态。并呈现_icons视图，这只是部分视图_icons.cshtml 。我可以在firebug中看到url已被调用但它永远不会被渲染。为什么????

firebug输出是这样的

GET http://localhost:2060/accounts/index 200 OK 2ms
GET http://localhost:2060/accounts/add 200 OK 5ms

当我点击ui-sref="accounts.add"并最终呈现索引操作时会发生这种情况。有人能告诉我为什么会这样吗？它不应该发生。我是否遗漏了ui-router的惯例？

Answer 1

我创建了一个显示/解释问题的plunker。

重点是，这个孩子状态：

.state('accounts.add', {
    url: "/add",
    views: {
        'content': { templateUrl: "/accounts/add" }
    }

与其父级具有相同的视图名称：＆＃39; content＆＃39;。事实上，不意味着它们针对相同的视图。否 - 孩子正在父母中搜索视图 - 名称为content。

父状态（accounts）的目标是Index.html （在ASP.NET MVC / home /中）：

<body>
    <div ui-view="content" ></div>
</body>

子状态（accounts.add）的目标是templateUrl: "/dashboard/index"：

<div>
  ... parent content ...
  ... and here is the place holder for child state (with the same name)
  ... "content"
  <div ui-view="content" ></div>
</div>

如何定位根ui-view="content" （index.html）的方法是使用绝对命名。在plunker中，我使用了Insert状态：

 .state('accounts.insert', {
     url: "/insert",
     views: {
         'content@': { templateUrl: "accounts.insert.tpl.html" }
     }

在视图名称'content@'的位置 @ i是如何定位根目录的方式。请查看文档以获取更多详细信息：

View Names - Relative vs. Absolute Names

小提取物：

views: {
    ////////////////////////////////////
    // Relative Targeting             //
    // Targets parent state ui-view's //
    ////////////////////////////////////

    // Relatively targets the 'detail' view in this state's parent state, 'contacts'.
    // <div ui-view='detail'/> within contacts.html
    "detail" : { },            

    // Relatively targets the unnamed view in this state's parent state, 'contacts'.
    // <div ui-view/> within contacts.html
    "" : { }, 

    ///////////////////////////////////////////////////////
    // Absolute Targeting using '@'                      //
    // Targets any view within this state or an ancestor //
    ///////////////////////////////////////////////////////

    // Absolutely targets the 'info' view in this state, 'contacts.detail'.
    // <div ui-view='info'/> within contacts.detail.html
    "info@contacts.detail" : { }

    // Absolutely targets the 'detail' view in the 'contacts' state.
    // <div ui-view='detail'/> within contacts.html
    "detail@contacts" : { }

    // Absolutely targets the unnamed view in parent 'contacts' state.
    // <div ui-view/> within contacts.html
    "@contacts" : { }

    // absolutely targets the 'status' view in root unnamed state.
    // <div ui-view='status'/> within index.html
    "status@" : { }

UI-Router无法在Asp.net Mvc中使用templateurl正确呈现子项

1 个答案: