Ciao,
stavo facendo esperienza con Ionic che drutta Angular e UI-Router. Ho creato un layout che utilizza le viste annidiate e per ora tutto ok (dopo molte botte sul muro con la testa
), ora avendo questa definizione nel mio modulo:
codice:
var app = angular.module("ehc", ["ionic"])
.config(function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('index', {
abstract: true,
views: {
"@": {
templateUrl: 'templates/layout.html',
controller: "HomeCtrl"
},
"menu@index": {
templateUrl: 'templates/menu.html'
},
"content@index": {
templateUrl: 'templates/content.html'
},
"a@index": {
templateUrl: 'templates/a.html'
},
"b@index": {
templateUrl: 'templates/b.html'
}
}
})
.state("home", {
parent:"index",
url:"/home",
controller:"Home2Ctrl"
});
}).controller("HomeCtrl", ["$scope", function ($scope) {
console.log("HomeCtrl");
$scope.test = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$scope.home = "Pippo";
$scope.a = "XAX";
$scope.b = "XBX";
$scope.data = {message: "Hello"};
}])
.controller("Home2Ctrl",["$scope",function($scope){
console.log("Home2Ctrl");
$scope.home2="pluto";
}]);
Nel file menu.html ci sono semplici link, vorrei capire ora come indicare che il link 1 aggiorni la vista a@index con un template ipotetico c@index (ho anche con il b@index già esistente)??
Io ho usato questa soluzione: immagino che dovendo cambiare link (stato) devo ricostruire la definizione delle varie viste presenti nello stato "index" modificando quello che mi serve
codice:
.state("index2",{
url:"/index2",
abstract: false,
views: {
"@": {
templateUrl: 'templates/layout.html',
controller: "HomeCtrl"
},
"menu@index": {
templateUrl: 'templates/menu.html'
},
"content@index": {
templateUrl: 'templates/content.html'
},
"a@index": {
templateUrl: 'templates/b.html'
},
"b@index": {
templateUrl: 'templates/b.html'
}
}
})
quindi nell viste html inserisco
codice:
<a ui-sref="index2">index 2</a>
Ma è corretto questo metodo di lavoro?