I have two different perspectives, view A and view B. In view A, I present my chart. However, upon transitioning to view B, I encounter a quick error. It seems that this error arises due to a setTimeout function not being completed before the view change occurs. How can I resolve this issue and prevent the error?
/* myApp module */
var myApp = angular.module('myApp', ['ui.router'])
.config(function ($stateProvider) {
$stateProvider.state('A', {
url: "/A",
template: '<div id="chart"></div><a ui-sref="B">NEXT</a>',
controller: function ($scope) {
var chartSensorial = c3.generate({
bindto: '#chart',
data: {
columns: [
[' ', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
],
type: 'bar',
labels:true
},
axis: {
rotated: true,
x: {
type: 'category',
categories: ['α A.N', 'NUC', 'LYS', 'PHE', 'LEU', 'ILE', 'CYS', 'MET', 'VAL', 'TYR', 'PRO', 'ALA', 'THR', 'ARG', 'HIS', 'GLY', 'SER', 'GLU', 'ASP'],
},
y:{
label:"Concentración"
}
},
transition: {
duration: 2000
}
});
setTimeout(function () {
chartSensorial.load({
columns: [
[5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5]
]
});
},2000)
}
}).state('B', {
url: "/B",
template: '<a ui-sref="A">BACK</a>',
controller: function ($scope) {
console.log("B");
}
});
})
.controller('MainCtrl', function ($scope, $state) {
$state.go("A");
});