Estou trabalhando com um projeto legado, escrito em AngularJS 1.5.8 e ASP.NET 4.5.
Com o objetivo de atualizar o ClientSide do projeto para Angular, o primeiro passo que tive que tomar foi de componentizar o sistema.
Porém, estou enfrentando um problema quando tendo renderizar algum componente, como por exemplo:
<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>
Ao tentar renderizar qualquer componente, como no caso, a sidenav e o toolbar, ocorre o problema, não gera nenhum erro, porém fica em um loop de requisições, carregando todos os componentes de novo e de novo, quando isso ocorre o navegador até para de responder aos comandos, como fechar por exemplo, não trava, porém tenho que encerrar o processo pois o botão não executa a ação.
Agradeço desde já quem puder me ajudar.
Edit 01 - Adicionei o código .js do componente appTopMenu.
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++;
});
}
]
});