Pass values between directives

Asked

Viewed 512 times

2

I’m starting with angular and have a question. I have the following scenario: I created a directive with responsibility to show message on the screen. Below her code.

message js.

"use strict";

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

html message.

<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>

Call for the directive

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

The question is as follows, when I update msgError, for example, this information is not updated within the message directive and therefore does not print the message on the screen, as I resolve ?

angularjs angularjs-directives angularjs-scope

  • alter @ for =

  • @Felippetadeu, actually your tip helped yes, but I needed to change the name of the attributes of the msgError message directive to error, so I believe I was having trouble recovering the value of the attribute.

1 answer

2


To solve the problem it was necessary to change the @’s by = and change the name of the attributes in the message directive, because the names with Camel case were giving problem.

"use strict";

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

Calling for:

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

Browser other questions tagged angularjs angularjs-directives angularjs-scope

You are not signed in. Login or sign up in order to post.