- 首页
- 其他开发
- UI-Router 多视图单个控制器不起作用
UI-Router 多视图单个控制器不起作用
[英] UI-Router Multiple Views Single Controller not work
本文介绍了UI-Router 多视图单个控制器不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用在视图中定义的一个控制器，但是 $scope 没有定义任何东西.有没有办法做到这一点?请分享一个简单的例子以便理解.
我有这个 index.html
<h1>{{home}}+{{a}}+{{b}}</h1><ion-side-menus enable-menu-with-back-views="false" delegate-handle="left"><!-- 左侧菜单--><ion-side-menu side="left" is-enabled="true"><ion-header-bar class="bar-stable">AAA</ion-header-bar><离子含量><div class="list"><div class="item item-divider">糖果棒
</离子含量></ion-side-menu><ion-side-menu-content edge-drag-threshold="true" drag-content="true"><!-- 主要内容，通常是<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-content class="has-header"><div class="row"><div class="col-50"><div ui-view="a"></div>
<div class="col-50"><div ui-view="b"></div>
</离子含量></ion-view></ion-side-menu-content><script type="text/ng-template" id="templates/a.html"><离子视图><ion-content class="has-header">**{{一种}}**</离子含量></ion-view><script type="text/ng-template" id="templates/b.html"><离子视图><ion-content class="has-header">**{{b}}**</离子含量></ion-view><script src="js/app.js"></script>
这是我的模型定义 app.js
var app = angular.module("ehc", ["ionic"]).config(function ($urlRouterProvider, $stateProvider) {$urlRouterProvider.otherwise('/');$stateProvider.state('家', {网址:'/'，控制器:HomeCtrl"，//模板:"<ion-header-bar></ion-header-bar><ion-content><h1>hello dal AngularJs</h1></ion-content>",意见:{一种": {templateUrl: '模板/a.html'},乙":{templateUrl: '模板/b.html'}}});}).controller("HomeCtrl", ["$scope", "$ionicSideMenuDelegate","$routeParams", "config", "$q", "$http"], 函数 ($scope, $ionicSideMenuDelegate, $routeParams, config, $q, $http) {$scope.toggleLeft = 函数 () {$ionicSideMenuDelegate.toggleLeft();};//carico le lingue e il 菜单console.log("AAAAAAAAAAAA");$scope.home = "皮波";$scope.a="XAX";$scope.b="XBX";})
console 是空的，也是 html 模板中的范围.如果您有解决方案，请使用非常简单的示例.
我读过这里，我认为它有效 Rakrap Jaknap 于 2015-04-17 08:01 回复
解决方案
非常相似的问题:为什么控制器在 UI-router 中不起作用angularjs?
这里的重点是:
<块引用>
控制器始终属于视图，从不属于状态.
换句话说，要使用相同类型的控制器(但每个视图有两个实例)，我们必须做那种声明:
$stateProvider.state('Home', {网址:'/'，//而不是这个//控制器:HomeCtrl"，意见:{一种": {templateUrl: 'templates/a.html',控制器:HomeCtrl"，//我们需要这个},乙":{templateUrl: 'templates/b.html',控制器:HomeCtrl"，//还有这个}}});
如果我们想在多个视图之间共享一些东西，我们需要不同于相同控制器"的技术.见:
另一个见解，可以在此处介绍:
包括打字稿，有详细的描述和示例所有视图/状态如何针对一些常见的RootModel
I would like to use one controller defined in views, but the $scope does not define anything. Is there a way to do this? Please share a simple example in order to understand.
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>
And this is my model definition 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";
})
console is empty and also the scope in html template. Please if you have the solution, use very simple example.
I've read here and I thought it worked Rakrap Jaknap answered on 2015-04-17 08:01
解决方案
Very similar issue: Why controller does not work in UI-router of angularjs?
The point here is:
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:
And including typescript, there is a detailed description and example how all views/states could target some common RootModel
这篇关于UI-Router 多视图单个控制器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
