[英]Angular UI-Router not showing html content, but directing to the right path. No errors, but ui-view not working
I am using UI-Router for an Angular app. 我正在为Angular应用程序使用UI-Router。 I can't seem to find what I am doing wrong. 我似乎找不到我做错了什么。 I am also not getting any errors which is making it really difficult for me to debug. 我也没有遇到任何错误,这使我调试起来非常困难。 Followed the docs as well and I am following their steps. 也遵循了文档,我正在遵循他们的步骤。 My controller function is working when I don't nest it in a child view. 当我不将其嵌套在子视图中时,我的控制器功能即起作用。 Can someone please direct me to what I am doing wrong? 有人可以指导我我做错了什么吗? Thanks in advance! 提前致谢!
APP.JS APP.JS
'use strict';
var app = angular.module('americasTopStatesApp', ['ui.router', 'ngAutocomplete']);
app.run(function($state, $rootScope) {
$rootScope.$state = $state;
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/home');
$stateProvider
//HOME
.state('home', {
url: '/home',
templateUrl: './app/views/homeTmpl.html',
controller: 'homeCtrl'
})
//RANKINGS
.state("rankings", {
url: "/rankings",
templateUrl: './app/views/rankingsTmpl.html',
controller: 'rankingsCtrl'
})
// RANKINGS CHILDREN
.state('rankings.data', {
url: '/data',
templateUrl: './app/views/rankingsDataTmpl.html',
controller: 'rankingsCtrl',
parent: 'rankings'
})
});
CONTROLLER rankingsCtrl 控制器排名Ctrl
'use strict';
app.controller('rankingsCtrl', function($scope, rankingsService) { //Start Controller
// ***********************************************
// *************** GET LATEST DATA ***************
// ***********************************************
$scope.getAllStateRankings = function() {
rankingsService.getStateRankingsData().then(function(data) {
$scope.showRankings = true;
// console.log("Contoller Data", data);
$scope.states = data;
});
};
$scope.showRankings = false;
$scope.getAllStateRankings();
}); //End Controller
PARENT VIEW rankingsTmpl.html 父视图排名Tmpl.html
<div class="rankings-heading">
<h1>America's Top States</h1>
<button ng-click="getAllStateRankings()">
<a ui-sref="rankings.data" id="data" class="btn">Data</a>
</button>
</div>
</div ui-view></div>
Child View (Nested ui-view) rankingsDataTmpl.html 子视图(嵌套ui视图)排名DataTmpl.html
<div class="rankings-container" ng-show="showRankings">
<div class="panel panel-primary" ng-repeat='state in states'>
<div class="panel-heading">
<h3 class="panel-title">{{state.state}}</h3>
</div>
<div class="panel-body">
Economy: {{state.economy}}<br>
Capital Access: {{state.accessToCapital}}<br>
Business: {{state.business}}<br>
Cost of living: {{state.costOfLiving}}<br>
</div>
</div>
</div>
Screen Shot 屏幕截图
There is a working plunker 有一个正在工作的矮人
In this case, when we have parent child and angular's UI-Router, we should not use solution based on 在这种情况下,当我们有父级孩子和angular的UI-Router时,我们不应该使用基于
parent and child has same controller. 父级和子级具有相同的控制器。
// WRONG approach
Because they in fact do have JUST same type
. 因为实际上它们确实具有相同的type
。 The instance
of that type 'rankingsCtrl'
in runtime is different. 运行时中类型为'rankingsCtrl'
的instance
是不同的。
What we need is: 我们需要的是:
scope inheritance
, driven by reference object, eg$scope.Model = {}
scope inheritance
,由引用对象驱动,例如$scope.Model = {}
There is adjusted controller: 调整了控制器:
.controller('rankingsCtrl', ['$scope', function($scope) {
$scope.Model = {};
$scope.getAllStateRankings = function() {
//rankingsService.getStateRankingsData().then(function(data) {
$scope.Model.showRankings = true;
// console.log("Contoller Data", data);
$scope.Model.states = data;
//});
};
$scope.Model.showRankings = false;
$scope.getAllStateRankings();
}])
At the end, child can have different controller with its own logic for the child view: 最后,child可以具有不同的控制器,并具有自己的子视图逻辑:
.state("rankings", {
url: "/rankings",
templateUrl: 'app/views/rankingsTmpl.html',
controller: 'rankingsCtrl'
})
// RANKINGS CHILDREN
.state('rankings.data', {
url: '/data',
templateUrl: 'app/views/rankingsDataTmpl.html',
controller: 'rankingsChildCtrl',
parent: 'rankings'
})
Also, the parent view should have fixed div: 另外,父视图应具有固定的div:
// wrong
</div ui-view></div>
// starting tag
<div ui-view></div>
Check it here in action 在这里检查
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.