使用 Angular-ui-router 和多个视图创建 JSFiddle [英] Creating a JSFiddle with Angular-ui-router and multiple views
问题描述
我有一个问题想问社区，但在设置所需的 JSFiddle 以使其更容易演示问题时遇到了麻烦.我想使用 Angular 的 ui-router 创建一个具有三个并排视图的小提琴.看起来很简单，但由于某种原因，我无法初始化视图的控制器.正如控制台消息所证明的那样，主应用程序已加载，但我被难住了.
小提琴是这里，为了完整起见，html和js在这里:
HTML:
<br/>$scope.testmsg = {{testmsg}}<br/>$scope.statename = {{statename}}<br/>最佳！<div ui-view="middle" class="middle">middle!</div><div ui-view="bottom" class="bottom">bottom!</div>
JS:
/* myApp 模块 */var myApp = angular.module('myApp', ['ui.router']).config(['$stateProvider', 函数 ($stateProvider) {$stateProvider.state('home', {网址:/"，意见:{'最佳': {网址:"",模板:'<div>顶！{{topmsg}}</div>',控制器:函数($scope){$scope.topmsg = "加载顶部！";console.log("top ctrl!");//这不会显示在控制台中}},'中间': {网址:"",模板:'<div>中！{{middlemsg}}</div>',控制器:函数($scope){$scope.middlemsg = "加载中间！";console.log("中间ctrl！");//这不会显示在控制台中}},'底部': {网址:"",templateUrl: '<div>底部！{{bottommsg}}</div>',控制器:函数($scope){$scope.bottommsg = "加载底部！";console.log("底部ctrl！");//这不会显示在控制台中}}},onEnter: 函数 () {console.log("进入家庭状态");//这不会显示在控制台中}});}]).controller('MyAppCtrl', function ($scope, $state/*, $stateParams*/) {$scope.statename = $state.current.name;$scope.testmsg = "应用范围工作！";console.log("MyAppCtrl 已初始化！");//这显示在控制台中$state.go("home");});我的 body 标签对我的应用程序和控制器有正确的(我相信)引用:<body ng-app="myApp" ng-controller="MyAppCtrl"></body>... 我被卡住了.任何帮助都会很棒.
提前致谢！
我认为您唯一的错误在于 'bottom' 视图的配置.你有 templateUrl 而不是 template.在我对您的小提琴进行此更改后，所有控制器都正确初始化.
这是更新的小提琴.但是就像我说的，将 templateUrl 更改为 template 是唯一的更改.希望这会有所帮助！
I have a question I would like to ask the community, but am having trouble setting up the required JSFiddle to make it easier to demonstrate the issue. I want to create a fiddle with three views side by side using Angular's ui-router. Seems simple, but for some reason I can't get the views' controller's to initialize. The main app loads, as evidenced by console messages, but I'm stumped.
The Fiddle is here, and for completeness sake, the html and js are here:
HTML:
<div ui-view="top" class="top">
<br />
$scope.testmsg = {{testmsg}}
<br />
$scope.statename = {{statename}}
<br />
top!
</div>
<div ui-view="middle" class="middle">middle!</div>
<div ui-view="bottom" class="bottom">bottom!</div>
JS:
/* myApp module */
var myApp = angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('home', {
url: "/",
views: {
'top': {
url: "",
template: '<div>top! {{topmsg}}</div>',
controller: function ($scope) {
$scope.topmsg = "loaded top!";
console.log("top ctrl!"); // this does NOT show in console
}
},
'middle': {
url: "",
template: '<div>middle! {{middlemsg}}</div>',
controller: function ($scope) {
$scope.middlemsg = "loaded middle!";
console.log("middle ctrl!"); // this does NOT show in console
}
},
'bottom': {
url: "",
templateUrl: '<div>bottom! {{bottommsg}}</div>',
controller: function ($scope) {
$scope.bottommsg = "loaded bottom!";
console.log("bottom ctrl!"); // this does NOT show in console
}
}
},
onEnter: function () {
console.log("entered home state"); // this does NOT show in console
}
});
}])
.controller('MyAppCtrl', function ($scope, $state/*, $stateParams*/) {
$scope.statename = $state.current.name;
$scope.testmsg = "app scope working!";
console.log("MyAppCtrl initialized!"); // this shows in console
$state.go("home");
});
My body tag has the correct (I believe) references to my app and controller: <body ng-app="myApp" ng-controller="MyAppCtrl"></body>... I'm stuck. Any help would be great.
Thanks in advance!
I think your only mistake is in the configuration for the 'bottom' view. You have templateUrl instead of template. After I made this change in your fiddle, all the controllers initialize correctly.
Here's an updated fiddle. But like I said, changing templateUrl to template is the only change. Hope this helps!
这篇关于使用 Angular-ui-router 和多个视图创建 JSFiddle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
