使用Angular-ui-router和多个视图创建JSFiddle [英] Creating a JSFiddle with Angular-ui-router and multiple views
问题描述
我有一个想向社区提出的问题，但是在设置必需的JSFiddle使其难以展示问题时遇到了麻烦.我想使用Angular的 ui-router 创建一个带有三个视图的小提琴.看起来很简单，但是由于某种原因，我无法初始化视图的控制器.如控制台消息所示，主应用程序已加载，但我很沮丧.
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.
小提琴位于此处，出于完整性考虑，html和js位于此处:
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");
});
我的body标签对我的应用程序和控制器具有正确的引用(我相信):<body ng-app="myApp" ng-controller="MyAppCtrl"></body> ...我被卡住了.任何帮助都会很棒.
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.
提前谢谢！
推荐答案
我认为您唯一的错误是'bottom'视图的配置.您有templateUrl而不是template.我在您的小提琴中进行了此更改之后，所有控制器均正确初始化.
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.
这是更新的小提琴.但是就像我说的那样，将templateUrl更改为template是唯一的更改.希望这会有所帮助！
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屋！
