I have a route series for an AngularJS app I am developing. I can't understand why I cant access scope vars from the View. My code:
Route
.state('dashboard.unique', {
url:'/unique/:id',
resolve: {
auth: function resolveAuthentication(AuthResolver) {
return AuthResolver.resolve();
}
},
views: {
'menuContent': {
templateUrl: 'closerViews/dashboard/uniqueservice.html',
controller: 'uniqueController'
}
}
});
View:
<ion-view title="Closer" class="closerTitle">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-drag"></button>
</ion-nav-buttons>
<ion-content class="has-header insideAPP lightBG" id="servicio_unico">
<div class='gallery'>
<img ng-src="{{urlImagen}}" />
<h1>{{nombre}}</h1>
<p>{{descripcion}}</p>
<ul>
<li>Precio: {{precio | currency}}</li>
<li>Duración: {{duracion}}</li>
<li>Hora Inicio: {{hora_inicio}}</li>
<li>Valoración: </li>
</ul>
</ion-content>
</ion-view>
Controller
app.controller('uniqueController', function($scope, $stateParams, $ionicLoading, $http, CLOSER_SERVER) {
$scope.urlImagen = "img/no_image.png";
$scope.nombre = "Nombre del servicio";
$scope.descripcion = "Descripcion del servicio";
$scope.precio = "999 €";
$scope.hora_inicio = "Hora del servicio";
$scope.duracion = "Duracion del servicio";
$scope.id_servicio = $stateParams.id;
var urlMaker = CLOSER_SERVER.url+'/servicio/'+$scope.id_servicio;
$http.get(urlMaker)
.success(function(response) {
var datos = JSON.stringify(response);
datos = JSON.parse(datos);
console.log(datos);
$scope.urlImagen = datos.urlImagen;
$scope.nombre = datos.nombre;
$scope.descripcion = datos.descripcion;
$scope.id_servicio = datos.id_servicio;
$scope.precio = datos.precio;
$scope.hora_inicio = datos.hora_inicio;
$scope.duracion = datos.duracion;
//Digerimos los datos para que se propaguen por el modelo
})
.error(function(error, data, headers){
console.log("Connection error");
});
});
Don't matter what I do, the view remains blank. I am using Angular UI Router, am I misunderstanding scope use of ui router?
EDIT Routes.js
closer.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url:'/',
templateUrl: 'closerViews/init.html',
controller: 'initController'
})
.state('login', {
url:'/login',
templateUrl: 'closerViews/login.html',
//Aqui vamos a poner un resolve a ReconnectResolver, para chequear si
//el token está guardado y que nos de un token renovado
controller: 'loginController'
})
.state('forgot', {
url:'/forgot_password',
templateUrl: 'closerViews/forgot.html',
controller: 'forgotController'
})
.state('forgotCode', {
url:'/insert_your_code',
templateUrl: 'closerViews/forgotCode.html',
controller: 'forgotCodeController'
})
.state('signup', {
url:'/signup',
templateUrl: 'closerViews/signup.html',
controller: 'signupController'
})
.state('dashboard', {
url:'/dashboard',
resolve: {
auth: function resolveAuthentication(AuthResolver) {
return AuthResolver.resolve();
}
},
abstract: true,
templateUrl: 'closerViews/dashboard/dashboard.html'
})
.state('dashboard.myDashboard', {
url:'/myDashboard',
resolve: {
auth: function resolveAuthentication(AuthResolver) {
return AuthResolver.resolve();
}
},
views: {
'menuContent': {
templateUrl: 'closerViews/dashboard/myDashboard.html',
controller: 'myDashboardController'
}
}
})
.state('dashboard.configuration', {
url:'/configuration',
resolve: {
auth: function resolveAuthentication(AuthResolver) {
return AuthResolver.resolve();
}
},
views: {
'menuContent': {
templateUrl: 'closerViews/dashboard/configuration.html',
controller: 'configController'
}
}
})
.state('dashboard.user', {
url:'/user',
resolve: {
auth: function resolveAuthentication(AuthResolver) {
return AuthResolver.resolve();
}
},
views: {
'menuContent': {
templateUrl: 'closerViews/dashboard/user.html',
controller: 'userController'
}
}
})
.state('dashboard.search', {
url:'/search',
resolve: {
auth: function resolveAuthentication(AuthResolver) {
return AuthResolver.resolve();
}
},
views: {
'menuContent': {
templateUrl: 'closerViews/dashboard/search.html',
controller: 'searchController'
}
}
})
.state('dashboard.legalterms', {
url:'/legalterms',
resolve: {
auth: function resolveAuthentication(AuthResolver) {
return AuthResolver.resolve();
}
},
views: {
'menuContent': {
templateUrl: 'closerViews/dashboard/legalterms.html',
controller: 'legalController'
}
}
})
.state('dashboard.allservices', {
url:'/allservices',
resolve: {
auth: function resolveAuthentication(AuthResolver) {
return AuthResolver.resolve();
}
},
views: {
'menuContent': {
templateUrl: 'closerViews/dashboard/allservices.html',
controller: 'servicesController'
}
}
})
.state('dashboard.unique', {
url:'/unique/:id',
resolve: {
auth: function resolveAuthentication(AuthResolver) {
return AuthResolver.resolve();
}
},
views: {
'menuContent': {
templateUrl: 'closerViews/dashboard/uniqueservice.html',
controller: 'uniqueController'
}
}
});
$urlRouterProvider.otherwise('/');
}]);
url:'/unique/:id'You have to point it in config or in html(ng-controller).<div ui-view="uniqueContent">the display gets entire black with no content. If I put ui-view attribute on ion-content directive, nothing special happens. 2 - I am taking the id on the controller with$stateParams.id, is there any better way to do it?Error: Failed to execute 'appendChild' on 'Node': This node type does not support this method.That is the error when I puto ui-view attribute inside<ion-content>directive