Question

我的观点有另一个问题。我希望在一个州和一个观点中有一个观点。这就是我所拥有的：

var home = {
    name: 'home',
    url: '/home/'
};

var homeAccess = {
    name: 'home.access',
    url: 'access',
    views: {
       'home@': {
           templateUrl: 'app/access/partials/webapi.html'
       },
       'home@abc': {
           templateUrl: 'app/access/partials/webapi2.html'
       }
       'home@def': {
           templateUrl: 'app/access/partials/webapi2.html'
       }
    }
};

在我的webapi.html中，我有这段代码：

  <div ui-view="abc"></div>
  <div ui-view="def"></div>

Webapi.html会出现，但不会填充视图abc和def。这也是一种有效的编码方式，或者我应该更好地使用ng-include作为这两个内部视图吗？

这是一个我认为可以解释问题的傻瓜：

http://plnkr.co/edit/Dive7GO1xyPjcNr2ZMGl?p=preview

我想看到的是＆＃34; abc模板＆＃34;但我看到的是＆＃34; ABC＆＃34;

        views: {
            "viewA": {
                template: "<div ui-view='abc'>ABC</div>"
            },
            "viewA@abc": {
                template: "abc template"
            }
        }

Answer 1

嗨，我更新你的plunker，那是你想要做的吗？

Plunker

  <div class="navbar">
    <div class="navbar-inner">
      <a class="brand" ui-sref="index">Quick Start</a>
      <ul class="nav">
        <li><a ui-sref="index">Home</a></li>
        <li><a ui-sref="route1.abc">Route 1</a></li>
      </ul>
    </div>
  </div>

$stateProvider
        .state('route1', {
            url: "/route",
            views: {
                "viewA": {
                    template: "<div ui-view='abc'>ABC</div>"
                },
                "viewB": {
                  template: "ViewB"
                }
            }
        })
        .state('route1.abc',{
          url: "/abc",
          views: {
            "abc": {
              template: "abc template"
            }
          }
        })
    });

Answer 2

需要{{view}} @ {{state}}。由于您的州是route1，您的视图将变为abc @ route1。

views: {
    "viewA": {
        template: "<div ui-view='abc'>ABC</div>"
    },
    "abc@route1": {
        template: "abc template"
    }
}

ui-router - 如何在状态中的视图中插入视图？

2 个答案: