UI-路由器多视图单控制器不工作 [英] UI-Router Multiple Views Single Controller not work
问题描述
我想用在视图中定义一个控制器，但 $范围不定义任何东西，有一个办法做到这一点？有你简单的例子，以了解？
I would like to use one controller defined in views, but the $scope does not define anything, there is a way to do it? have you simple examples in order to understand?
我有这样的index.html
I have this 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>
这是我MODELE定义的 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模板的范围。如果您有任何解决方案，使用非常简单的例子。
console is empty and also the scope in html template. Please if you have the solution, use very simple example.
我在这里读，我觉得它的工作的 Rakrap Jaknap回答了2015年4月17日08:01
I've read here and I thought it worked Rakrap Jaknap answered on 2015-04-17 08:01
推荐答案
非常类似的问题：为什么控制器没有在UI的路由器工作angularjs的？
这里的要点是：
控制器总是属于查看，再也没有状态。
Controller always belongs to View, never to state.
也就是说，使用相同类型的控制器（但每个视图两个实例），我们所要做的那种声明：
Other words, to use same type of controller (but two instances for each view), we have to do that kind of declaration:
$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
}
}
});
在情况下，我们想分享许多观点之间的一些东西，我们需要的不是同一控制人不同的技术。参见：
In case, we want to share some stuff among many views, we need different technique than "same controller". See:
另一个洞察力，能在这里介绍：
Another insight, could be covered here:
和包括打字稿，是有详细的说明和例子，说明所有视图/国家可以针对一些常见的 RootModel
And including typescript, there is a detailed description and example how all views/states could target some common RootModel
这篇关于UI-路由器多视图单控制器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
