In the course of developing an AngularJS app, I have encountered an issue with accessing scope variables from the View. Here is a snippet of 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>Price: {{precio | currency}}</li>
<li>Duration: {{duracion}}</li>
<li>Start Time: {{hora_inicio}}</li>
<li>Rating: </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 = "Service Name";
$scope.descripcion = "Service Description";
$scope.precio = "999 €";
$scope.hora_inicio = "Service Time";
$scope.duracion = "Service Duration";
$scope.id_servicio = $stateParams.id;
var urlMaker = CLOSER_SERVER.url+'/service/'+$scope.id_servicio;
$http.get(urlMaker)
.success(function(response) {
var data = JSON.stringify(response);
data = JSON.parse(data);
console.log(data);
$scope.urlImagen = data.urlImagen;
$scope.nombre = data.nombre;
$scope.descripcion = data.descripcion;
$scope.id_service = data.id_service;
$scope.precio = data.precio;
$scope.hora_inicio = data.hora_inicio;
$scope.duracion = data.duracion;
//Digest the data to propagate it throughout the model
})
.error(function(error, data, headers){
console.log("Connection error");
});
});
No matter what I try, the view remains empty. I am utilizing Angular UI Router and wondering if there's a misunderstanding in how scopes are used with 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',
//We will include a resolve to ReconnectResolver here, to check if
//the token is stored and provide us with a renewed token
controller: 'loginController'
})
... (more states defined here)
.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('/');
}]);