Question

使用Angular构建项目。它的构建方式使用状态，并且每个状态都在其自己的部分中定义，以实现可伸缩性。我的主页正在渲染，但我试图在其中渲染的部分不是。为什么呢？

home.js

function config($stateProvider){
    $stateProvider
        .state('simple.home', {
            url: 'home',
            templateUrl: 'app/home/home.tpl.html',
            controller: 'HomeCtrl as vm'
        })

}

function HomeCtrl($stateParams, $rootScope, $state){
    var vm = this;
}

angular.module('simple.home', [
    'ui.router',
    'simple.home.ratings',
    'simple.home.search_filter'
])

    .config(config)
    .controller('HomeCtrl', HomeCtrl)
;

home.tpl.html

<div class="yellow" ui-view="search_filter"></div>
<div class="red" ui-view="ratings"></div>

<style>.yellow {background: yellow; height:400px; width:400px;}
    .red {background: red; height: 400px; width: 800px;}
</style>

ratings.js

function config($stateProvider){
    $stateProvider
        .state('simple.home.ratings', {
            views: {
                'ratings': {
                    templateUrl: 'app/home/ratings/ratings.tpl.html',
                    controller: 'RatingsCtrl as vm'
                }
            }
        })
}

function RatingsCtrl($modal) {
    var vm = this;
}

angular.module('simple.home.ratings', [
    'ui.router',
    'ui.bootstrap'
])
    .config(config)
    .controller('RatingsCtrl', RatingsCtrl)

;

search_filter.js

function config($stateProvider){
    $stateProvider
        .state('simple.home.search_filter', {
            views: {
                'search_filter': {
                    templateUrl: 'app/home/search_filter/search_filter.tpl.html',
                    controller: 'SearchFilterCtrl as vm'
                }
            }
        })
}

function SearchFilterCtrl(){
    var vm = this;
}

angular.module('simple.home.search_filter', [
    'ui.router',
    'ui.bootstrap'
])
    .config(config)
    .controller('SearchFilterCtrl', SearchFilterCtrl)

;

这是我目前所看到的。我在这里搞砸了什么？

http://i988.photobucket.com/albums/af6/jtbitt/Screen%20Shot%202015-11-18%20at%2012.58.01%20PM_zps4xgdammm.png

Answer 1

他们没有加载，因为你正在创建命名子视图但是正试图让你的状态加载。

只需使用<div ui-view></div>即可加载。

定义状态时，您需要为其提供一个URL。像这样：

.state('simple.home.search_filter', {
      url: "/search_filter",
      templateUrl: "app/home/search_filter/search_filter.tpl.html",
      ...

请参阅文档以获取有用的示例和解释： https://github.com/angular-ui/ui-router

如果您想使用<div ui-view='viewA'></div>之类的命名视图您需要更详细的状态定义

.state('mystate', {
  url: '/mystate',
  views: {
    'viewA': {
      template: 'path/to/viewA/template.html'
    }
  }
}

为什么这些视图不呈现？ Angular.js

1 个答案: