0

我在理解 UI Router 嵌套视图中的嵌套视图时遇到了麻烦……更具体地说，它们是什么样子的……？

我需要理解它，因为我需要继承我的 $scope 属性。

我在文档中看到了这个例子

$stateProvider
.state('contacts', {
    abstract: true,
    url: '/contacts',
    templateUrl: 'contacts.html',
    controller: function($scope){
        $scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
    }           
})
.state('contacts.list', {
    url: '/list',
    templateUrl: 'contacts.list.html'
})
.state('contacts.detail', {
    url: '/:id',
    templateUrl: 'contacts.detail.html',
    controller: function($scope, $stateParams){
      $scope.person = $scope.contacts[$stateParams.id];
    }
})

然后我在文档中看到类似的东西

   $stateProvider
  .state('report',{
    views: {
      'filters': {
        templateUrl: 'report-filters.html',
        controller: function($scope){ ... controller stuff just for filters view ... }
      },
      'tabledata': {
        templateUrl: 'report-table.html',
        controller: function($scope){ ... controller stuff just for tabledata view ... }
      },
      'graph': {
        templateUrl: 'report-graph.html',
        controller: function($scope){ ... controller stuff just for graph view ... }
      }
    }
  })

这对我来说有点令人困惑，因为我需要 $scope 继承，所以我需要嵌套我的视图——只是不太确定它是哪个示例。

更新 这是我的状态

$locationProvider.html5Mode(false);
    $stateProvider
        .state('search', {
        abstract: true,
        url: '/search',
        controller: 'searchCtrl',
        controllerAs: 'vm',
        templateUrl: 'search/index.html'    
    })
      .state('search.query', {
        url: '/',
        controller: 'searchCtrl',
        controllerAs: 'vm',
        templateUrl: 'search/query.html'
      })
        .state('search.results', {
        url: '/?q',//for query parameter in url
        controller: 'searchCtrl',
        controllerAs: 'vm',
        templateUrl: 'search/results.html'
      });
$urlRouterProvider.otherwise('/');

我想要实现的只是 query.html 上的一个简单搜索表单，一旦用户输入或选择了一个搜索词，它就会使用另一个搜索表单和结果进入 search.html。

这些是我的模板，我相信我已经正确设置了它们，但是出现了问题，因为什么都没有显示。

/app/index.html
<div ui-view></div>


/app/search/index.html
<div ui-view></div>


/app/search/query.html
<form>
...
</form>

/app/search/results.html
<div ui-view></div>
<div>
...
</div>
4

1 回答 1

0

第一个是嵌套状态的示例，它满足您对继承范围对象的要求。例如 state/sub-state-a, state/sub-state-b 您从文档中获取的第一个片段上方的注释如下：

显示前置 url、插入模板、配对控制器和继承的 $scope 对象。

第二个示例是嵌套视图，您可以在其中为每个状态定义多个视图，并根据您的用例使用每个视图。从文档：

然后views中的每个view都可以设置自己的模板（template、templateUrl、templateProvider）、控制器（controller、controllerProvider）。

于 2016-08-30T10:41:40.353 回答