2

estou começando com angular e tenho uma dúvida. Tenho o seguinte cenário: Criei uma diretiva com responsabilidade de mostrar mensagem na tela. Abaixo o código dela.

mensagem.js

"use strict";

angular.module("layout")
.directive('mensagem', function () {
    return {
        restrict: 'EA',
        templateUrl: '/Marcenaria/Scripts/App/Directive/Layout/mensagem.html',
        scope:{
            msgSucesso: '@',
            msgError: '@',
            msgInfo: '@'
        }
    }
});

mensagem.html

<div ng-if="msgSucesso" class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <h4>    <i class="icon fa fa-check"></i> Sucesso!</h4>
    {{msgSucesso}}
</div>
<div ng-if="msgError" class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <h4>    <i class="icon fa fa-warning"></i> Atenção!</h4>
    {{msgError}}
</div>
<div ng-if="msgInfo" class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <h4><i class="icon fa fa-info"></i> Informativo!</h4>
    {{msgInfo}}
</div>

Chamada da diretiva

 <mensagem msgError="{{msgError}}" msgSucesso="{{msgSucesso}}" msgInfo="{{msgInfo}}"></mensagem>

A dúvida é a seguinte, quando atualizo o msgError, por exemplo, essa informação não é atualizada dentro da diretiva mensagem e por isso não imprime a mensagem na tela, como resolvo ?

2
  • altere @ por = 27/10/2015 às 0:43
  • @FelippeTadeu, na verdade sua dica ajudou sim, mas precisei mudar o nome dos atributos da diretiva mensagem de msgError para error, com isso, acredito que estava com problema na hora de recuperar o valor do atributo. 27/10/2015 às 1:03

1 Resposta 1

2

Para resolver o problema foi necessário alterar os @'s por = e alterar o nome dos atributos na diretiva mensagem, pois os nomes com camel case estavam dando problema.

"use strict";

angular.module("layout")
.directive('mensagem', function () {
    return {
        restrict: 'EA',
        templateUrl: '/Marcenaria/Scripts/App/Directive/Layout/mensagem.html',
        scope:{
            sucesso: '=',
            error: '=',
            info: '='
        }
    }
});

Chamada:

<mensagem error="{{msgError}}" sucesso="{{msgSucesso}}" info="{{msgInfo}}"></mensagem>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .