为什么这些观点没有呈现？ Angular.js

本文介绍了为什么这些观点没有呈现？ Angular.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

扩建采用了棱角分明的项目。它的建成方式使用状态，每个州在它自己的部分定义为可扩展性。我的主页被渲染，但我想它里面呈现的谐音不是。为什么呢？

Building out a project using Angular. The way it's built uses states, and each state is defined in it's own section, for scalability. My home page is rendering but the partials I'm trying to render inside of it are not. Why?

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

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

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

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) ;

下面是我所看到的目前。我是什么弄乱在这里？

Here's what I'm seeing currently. What am I messing up here?

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

推荐答案

他们不加载，因为你要创建一个名为子视图但试图让你的国家来加载。

They're not loading because you're creating named subviews but are trying to get your states to load.

只要使用＆LT;格UI的视图＆gt;＆LT; / DIV＆GT; ，它应该载入

当定义你的状态，你需要给他们一个网址。像这样：

When defining your states you need to give them a URL. Like so:

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

见有用的例子和说明文档： github/angular-ui/ui-router

如果你想要像＆LT命名视图工作; DIV UI视图='viewA'＆GT;＆LT; / DIV＆GT; 你需要一个更复杂的状态定义

If you want to work with named views like <div ui-view='viewA'></div> You need to a more elaborate state definition

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