stateparams - ui-view angularjs
UI-Router Multiple Views Single Controller no funciona (1)
Me gustaría utilizar un controlador definido en vistas, pero $scope no define nada. ¿Hay alguna forma de hacer esto? Por favor comparte un ejemplo simple para entender.
Tengo este 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>
Y esta es mi definición de modelo 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";
})
la consola está vacía y también el alcance en la plantilla html. Por favor, si tiene la solución, use un ejemplo muy simple.
He leído aquí y pensé que funcionaba Rakrap Jaknap respondió el 2015-04-17 08:01
Problema muy similar: ¿Por qué el controlador no funciona en UI-enrutador de angularjs?
El punto aquí es:
El controlador siempre pertenece a View, never to state.
En otras palabras, para usar el mismo tipo de controlador (pero dos instancias para cada vista), tenemos que hacer ese tipo de declaración:
$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
}
}
});
En caso de que deseemos compartir algunas cosas entre muchas vistas, necesitamos una técnica diferente a la de "mismo controlador". Ver:
¿Cómo comparto $ scope data entre estados en angularjs ui-router?
Otra idea, podría ser cubierta aquí:
instanciación de alcance y controlador con enrutador ui
E incluyendo texto mecanografiado, hay una descripción detallada y un ejemplo de cómo todas las vistas / estados podrían apuntar a algún RootModel común