I'm working with a legacy project, written in AngularJS 1.5.8 and ASP.NET 4.5.
In order to upgrade Project ClientSide to Angular, the first step I had to take was to make the system componentize.
However, I'm having a problem when rendering some component, such as:
<body class="hold-transition sidebar-mini fixed" md-no-ink>
<div class="wrapper" style="height:calc(100%)" loading-listener column="row" flex>
<div style="height:calc(100%)" class="display-hidden" ng-class="true ? 'display-block':''">
<div layout="row" style="height:100%">
<app-sidenav></app-sidenav>
<div flex>
<div layout="column" flex>
<div flex>
<app-toolbar></app-toolbar>
</div>
<main flex>
@RenderBody()
</main>
</div>
</div>
</div>
</div>
</div>
When trying to render any component, such as sidenav and toolbar, the problem occurs, it does not generate any errors, but it gets in a requests loop, loading all the components again and again, when this occurs. browser even stops responding to commands, such as close eg does not lock, however I have to terminate the process because the button does not perform the action.
Thank you in advance for helping me.
Edit 01 - I added the .js code for the appTopMenu component.
angular.module('messageModule')
.component('appTopMenu', {
templateUrl: 'components/message-component/message.template.html',
controller: ["$scope", "$mdToast", "$location", "$rootScope", "CommonService", "Enums",
function MessageController($scope, $mdToast, $location, $rootScope, CommonService, Enums) {
$rootScope.AppInfo = Enums.AppInfo;
$rootScope.$on("user:loggedin", function () {
$scope.mensagens = [];
$mdToast.hide();
});
$rootScope.Sair = function () {
$rootScope.loggedUser = false;
CommonService.autenticacao.sair().$promise.then(function () {
location.reload();
});
};
$rootScope.$on('user:notlogged', function () { $rootScope.Sair(); });
$scope.mensagens = [];
$scope.icone = Enums.MsgIcon;
$scope.cor = Enums.MsgColorContext;
$rootScope.reqsActive = 0;
$rootScope.closeToast = function () {
$mdToast.hide();
};
xhook.after(function (request, response, callback) {
callback();
$rootScope.reqsActive--;
if (request.url !== 'go/autenticacao' && response.finalUrl.indexOf('go/Autenticacao') >= 0) {
$rootScope.$emit("user:notlogged");
}
$rootScope.url = $location.path();
if ($rootScope.reqsActive === 0) {
$rootScope.$broadcast("loading:completed");
}
var data = {};
try {
if (response.headers['content-type'].indexOf("application/json") < 0) {
return;
}
else {
if (response.data.indexOf("{\"Messages\":[]") < 0)
data = JSON.parse(response.data);
else
return;
}
} catch (e) {
return;
}
var htMessages = [];
if (data.Message && true) {
data.Messages = [];
data.Messages.push({ Type: "E".charCodeAt(0), Message: data.Message });
data.Messages.push({ Type: "E".charCodeAt(0), Message: data.ExceptionMessage });
}
if (data && data.Messages && !data.NotInterceptable) {
$.each(data.Messages,
function (i, msg) {
tipo = String.fromCharCode(msg.Type);
htMessages.push('<div class="md-toast-content progress-bar-striped alert-' + $scope.cor[tipo] + '">' +
'<span class="md-toast-text" flex>' + msg.Message + '</span>' +
'<md-button ng-click="$root.closeToast()"> OK </md-button>' +
'</div>');
$scope.mensagens.push({ tipo: tipo, texto: msg.Message });
});
var el = $("body")[0];
if (data.Messages.length)
$mdToast.show({
parent: el,
template: '<md-toast style="z-index:90007">' + htMessages.join("") + '</md-toast>',
hideDelay: 8000,
position: "top right"
});
}
});
$rootScope.$broadcast("loading:completed");
xhook.before(function (request, callback) {
request.headers["Pragma"] = "no-cache";
callback();
if ($rootScope.reqsActive === 0) {
$rootScope.$broadcast("loading:started");
}
$rootScope.reqsActive++;
});
}
]
});