UI路由器多视图单个控制器不起作用
我想使用在视图中定义的一个控制器，但是$scope没有定义任何东西。有没有办法做到这一点？请分享一个简单的例子以了解。
我有这个index.html
<body ng-app="ehc">
<h1>{{home}}+{{a}}+{{b}}</h1>
<ion-side-menus enable-menu-with-back-views="false" delegate-handle="left">
<!-- Left menu -->
<ion-side-menu side="left" is-enabled="true">
<ion-header-bar class="bar-stable">AAA</ion-header-bar>
<ion-content>
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
</div>
</ion-content>
</ion-side-menu>
<ion-side-menu-content edge-drag-threshold="true" drag-content="true">
<!-- Main content, usually <ion-nav-view> -->
<ion-nav-bar class="bar-positive" >
<ion-nav-title>
<h2>hello world title *{{home}}*</h2>
</ion-nav-title>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-view>
<ion-content class="has-header">
<div class="row">
<div class="col-50">
<div ui-view="a"></div>
</div>
<div class="col-50">
<div ui-view="b"></div>
</div>
</div>
</ion-content>
</ion-view>
</ion-side-menu-content>
<script type="text/ng-template" id="templates/a.html">
<ion-view>
<ion-content class="has-header">
**{{a}}**
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="templates/b.html">
<ion-view>
<ion-content class="has-header">
**{{b}}**
</ion-content>
</ion-view>
</script>
</body>
<script src="js/app.js"></script>
这是我的模型定义 app.js
var app = angular.module("ehc", ["ionic"])
.config(function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('Home', {
url: '/',
controller: "HomeCtrl",
//template:"<ion-header-bar></ion-header-bar><ion-content><h1>hello dal AngularJs</h1></ion-content>",
views: {
"a": {
templateUrl: 'templates/a.html'
},
"b": {
templateUrl: 'templates/b.html'
}
}
});
}).controller("HomeCtrl", ["$scope", "$ionicSideMenuDelegate",
"$routeParams", "config", "$q", "$http"], function ($scope, $ionicSideMenuDelegate, $routeParams, config, $q, $http) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
//carico le lingue e il menu
console.log("AAAAAAAAAAAA");
$scope.home = "Pippo";
$scope.a="XAX";
$scope.b="XBX";
})
控制台为空，并且html模板中的作用域为空。如果您有解决方案，请使用非常简单的示例。
我在这里阅读，我认为它起作用Rakrap Jaknap于2015-04-17
08:01回答
问题答案：
这里的重点是：
控制器始终属于视图，从不属于状态。
换句话说，要使用相同类型的控制器（每个视图有两个实例），我们必须执行这种声明：
$stateProvider.state('Home', {
url: '/',
// instead of this
//controller: "HomeCtrl",
views: {
"a": {
templateUrl: 'templates/a.html',
controller: "HomeCtrl", // we need this
},
"b": {
templateUrl: 'templates/b.html',
controller: "HomeCtrl", // and also this
}
}
});
如果要在许多视图之间共享某些内容，则需要与“相同控制器”不同的技术。看到：
如何在angularjs ui-router中的状态之间共享$scope数据？
另一个见解可以在这里介绍：
ui路由器的作用域和控制器实例化
包括打字稿在内，这里有详细的描述和示例，说明所有视图/状态如何针对一些常见的 RootModel
-
问题内容： 一个单例控制器是否可能具有多个视图 [https://github.com/angular-ui/ui- router/issues/494] ？ 用例：我有一个ui-view = header和ui-view = content。我根据当前状态更改标题以显示上下文相关的按钮（即返回，保存，过滤等）。我希望这些按钮在内容控制器中调用一个函数，但是如果执行以下操作，它将创建两个MyCon
-
问题内容： 建立一个多步骤表单（“向导”）。最初是按照本教程进行的，该教程效果很好，但是现在尝试对其进行调整，因此第一步已嵌入首页中，而不是单独的状态。无论我做什么，我都无法创建一条可行的路径。我总是得到： 无法从状态“ home”解析“ .where” 要么 无法从状态“家”解析“ wizard.where” 要么 无法从状态“ home”解析“ wizard.where @” …即使在中效果很
-
问题内容： 我觉得这是一个简单的用例，但也许我遗漏了一些东西… 我想有 两个单独的视图，它们分别由各自的菜单控制。当我单击一个菜单上的链接时（或为此），我只想更新其中一个视图。此外，只需在中反映两个视图之一。 我尝试 定义一些状态： 现在，从您最喜欢的控制器中按，然后看着它将废话换成。我还想省略此状态下的定义，因为只能在我定义的第一和第三状态之间进行更改。 我在index.html中彼此并排坐着：
-
问题内容： 似乎无法正常工作。通过日期是这样的： 在目标状态上忽略参数 码： 现场示例可以在 这里 找到 谢谢。 问题答案： 您不能在状态之间传递任意参数，您需要将它们定义为定义的一部分。例如 上面的代码将输出定义了contactId属性的对象。如果你去，你会的。 有关更多信息，请参见UI-Router URL路由的文档。
-
问题内容： 我有一个抽象的父视图，该视图旨在与其嵌套视图共享一个控制器。 路由工作正常。 问题是，当我从其中一个嵌套视图更新变量时，更改未反映在视图中。当我从父视图执行相同操作时，它可以正常工作。这种情况不需要。 我的猜测是正在为每个视图创建一个新的实例，但是我不确定为什么或如何修复它。 问题答案： 这里的问题与以下问答有关：如何在angularjs ui-router中的状态之间共享$scope
-
问题内容： 我对何时实例化控制器感到困惑。另外，嵌套状态时如何实例化控制器。我可能会感到困惑，如何将范围附加到视图和控制器，也就是说，如果每个视图都有自己的控制器和范围，或者它们共享相同的范围。 有人可以解释何时实例化控制器吗？在嵌套路由下，所有视图是否共享一个控制器和范围？当我切换状态并返回另一个控制器实例化的状态时会发生什么？ 以下是我的路线（配置文件）： 问题答案： 要获得更详细的答案，我们