0

Preciso atualizar os valores dentro da diretiva mensagem através da diretiva manter-fornecedor-formulario, ambas estão dentro da diretiva manter-fornecedor. É possível ? Se sim, como faço isso ?

manter-fornecedor.html

<cabecalho-interno entidade="Funcionario" acao="Pesquisar"></cabecalho-interno>

<section class="content">
    <mensagem error="msgError" sucesso="msgSucesso" info="msgInfo"></mensagem>
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title">Casdastro</h3>
                <div class="box-tools">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
            </div>
            <manter-fornecedor-formulario></manter-fornecedor-formulario>
        </div>
    </div>
    <hr />
</section>

manter-fornecedor.js

"use strict";

angular.module("fornecedor")
.directive('manterFornecedor', function () {
    return {
        restrict: 'EA',
        templateUrl: '/Marcenaria/Scripts/App/Directive/Fornecedor/manter-fornecedor.html',
        link: function(scope,elm,attrs){

        },
        scope: {
            msgSucesso: '=',
            msgError: '=',
            msgInfo: '='
        }
    }
});

mensagem.js

"use strict";

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

mensagem.html

<div ng-if="sucesso" 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>
    {{sucesso}}
</div>
<div ng-if="error" 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>
    {{error}}
</div>
<div ng-if="info" 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>
    {{info}}
</div>

manter-fornecedor-formulario.html

<form role="form">
    <div class="box-body">
        <div class="form-group col-xs-4">
            <label>Nome</label>
            <input type="text" class="form-control" ng-model="Nome"
                    name="Nome" id="Nome" placeholder="Insira o nome" />
        </div>
        <div class="form-group col-xs-4">
            <label>Telefone</label>
            <input type="text" class="form-control" ng-model="Telefone"
                    name="Telefone" id="Telefone" placeholder="Insira o número de telefone" />
        </div>
        <div class="form-group col-xs-4">
            <label>Contato</label>
            <input type="text" class="form-control" ng-model="Contato"
                    name="Contato" id="Contato" placeholder="Insira o nome do contato" />
        </div>
    </div>
    <div class="modal-footer">
        <botao-salvar ng-click="mFornCtrl.salvar()"></botao-salvar>
        <botao-limpar ng-click="mFornCtrl.limpar()"></botao-limpar>
    </div>
</form>

manter-fornecedor-formulario.js

"use strict";

angular.module("fornecedor")
.directive('manterFornecedorFormulario', function () {
    return {
        restrict: 'EA',
        templateUrl: '/Marcenaria/Scripts/App/Directive/Fornecedor/manter-fornecedor-formulario.html',
        link: function(scope,elm,attrs){

        },
        scope:{
            msgSucesso: '=',
            msgError: '=',
            msgInfo: '='
        },
        controller: "manterFornecedorCtrl",
        controllerAs : "mFornCtrl"
    }
});

angular.module("fornecedor")
.controller("manterFornecedorCtrl", ["$scope", "$http", "$timeout", "request", "tools", function ($scope, $http, $timeout, request, tools) {

    var self = this;
    $scope.loadingAjax = false;

    this.limpar = function () {
        $scope.Nome = "";
        $scope.Contato = "";
        $scope.Telefone = "";
        $scope.msgSucesso = "";
        $scope.msgError = "";
        $scope.msgInfo = "";
    };

    this.salvar = function () {
        $scope.msgSucesso = "";
        $scope.msgError = "";
        var msg = "";

        if (tools.IsNullOrEmpty($scope.Nome)) {
            msg += "O campo Nome está em branco! \n";
        }

        if (msg.length == 0) {
            if (!$scope.loadingAjax) {
                $scope.loadingAjax = true;
                console.log("ID para alterar: "+$scope.Id);
                request._post("/Marcenaria/Fornecedor/Salvar", {
                    Nome: $scope.Nome,
                    Telefone: $scope.Telefone,
                    Contato: $scope.Contato,
                    Id: $scope.Id
                })
                .then(function (data) {
                    $scope.msgSucesso = "Forncedor inserido com sucesso.";
                    $scope.loadingAjax = false;
                }, function (erro) {
                    $scope.msgError += "ERRO: " + erro;
                    $scope.loadingAjax = false;
                });
            }
        } else {
            $scope.msgError = msg;
        }
    };
}]);
2
  • 1
    Não vejo muito sentido nisso que está tentando fazer. Depois de compilados dos dados da diretiva estarão disponíveis no escopo principal. Acredito que a pergunta deveria ser outra. "Como atualizar dados de um diretiva no escopo principal?" Commented 27/10/2015 às 17:54
  • Obrigado pelo norte, vou procurar sobre. Commented 28/10/2015 às 1:01

1 Resposta 1

0

Não há necessidade de alterar diretamente o $scope de outro módulo, mas sim utilizando o two way binding. Logo foi apenas necessário passar os dados como atributos na diretiva:

<cabecalho-interno entidade="Funcionario" acao="Pesquisar"></cabecalho-interno>

<section class="content">
    <mensagem error="msgError" sucesso="msgSucesso" info="msgInfo"></mensagem>
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title">Casdastro</h3>
                <div class="box-tools">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
            </div>
            <manter-fornecedor-formulario msg-error="msgError" msg-sucesso="msgSucesso" msg-info="msgInfo"></manter-fornecedor-formulario>
        </div>
    </div>
    <hr />
</section>

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 .