Pass directive within template

Question

Pass directive within template

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)

4

I have the following scenario: I have a modal call directive and I want to pass another policy as content, the code is as follows:

maintain-provider-form.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;
        }
    };
}]);

modal.html

<div class="example-modal" ng-if="isMostrar">
    <div class="modal modal-primary">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" ng-click="modalCtrl.fechar()" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{titulo}}</h4>
                </div>
                <div class="modal-body">
                    {{corpo}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal" ng-click="modalCtrl.fechar()">Fechar</button>
                    {{botoes}}
                </div>
            </div>
        </div>
    </div>
</div>

modal.js

"use strict";

angular.module("layout")
.directive('modal', function () {
    return {
        restrict: 'EA',
        templateUrl: '/Marcenaria/Scripts/App/Directive/Layout/modal.html',
        scope: {
            titulo: '=',
            isMostrar: '=',
            corpo: '='
        },
        controller: "modalCtrl",
        controllerAs: "modalCtrl"
    }
});

angular.module("layout")
.controller("modalCtrl", ["$scope", "$http", "$timeout", "request", "tools", function ($scope, $http, $timeout, request, tools) {
    var self = this;
    $scope.isMostrar = true;
    this.fechar = function () {
        $scope.isMostrar = false;
    };
    this.abrir = function () {
        $scope.isMostrar = true;
    };
}]);

code snippet calling modal:

angular.module("fornecedor")
.controller("pesquisarFornecedorCtrl", ["$scope", "$http", "$timeout", "request", "tools", function ($scope, $http, $timeout, request, tools) {
    var self = this;
    var msg = "";
    $scope.loadingAjax = false;
    $scope.fornecedores = [];
    $scope.tituloModal = "Editar Fornecedor";
    $scope.corpoModal = "<manter-fornecedor-formulario></manter-fornecedor-formulario>";

...

called in the template:

<modal titulo="tituloModal" corpo="corpoModal" is-mostrar="isMostrarModal"></modal>

result obtained:

How do I print the maintain-provider-form directive within the modal?

angularjs angularjs-directives template angularjs-scope

asked by anonymous 27.10.2015 / 15:05

3 answers

1

Try the following:

angular.module("fornecedor")
.controller("pesquisarFornecedorCtrl", ["$scope", "$http", "$timeout", "request", "tools", "$compile" function ($scope, $http, $timeout, request, tools, $compile) {
    var self = this;
    var msg = "";
    $scope.loadingAjax = false;
    $scope.fornecedores = [];
    $scope.tituloModal = "Editar Fornecedor";
    $scope.corpoModal = $compile("<manter-fornecedor-formulario></manter-fornecedor-formulario>");
});

27.10.2015 / 15:16

0

I've been given the code below to circumvent the problem, but I do not think it's the best way, does anyone have another suggestion?

angular.module("layout")
.directive('modal', function ($compile, $timeout) {
    return {
        restrict: 'EA',
        templateUrl: '/Marcenaria/Scripts/App/Directive/Layout/modal.html',
        scope: {
            titulo: '=',
            isMostrar: '=',
            corpo: '='
        },
        link: function (scope, element, attrs) {
            var elm = $compile(scope.corpo)(scope);

            $timeout(function () {
                try {
                    scope.$apply(function () {
                        $("#modalcontent").replaceWith(elm)
                    });
                } catch (err) { };
            }, 100);
        },
        controller: "modalCtrl",
        controllerAs: "modalCtrl"
    }
});

27.10.2015 / 17:50

How to connect JDBC (H2 Database) in PHP? Sort a vector of texts using regular expressions using R

score 3 · Accepted Answer

You can create another policy called "modal-body" by passing the body (name of the directive to be injected) as a parameter, thus:

angular.module("layout")
.directive('modalCorpo', function ($compile) {
    return {
        restrict: 'EA',
        scope: {
            corpo: '='
        },
        link: function (scope, element, attrs) {
             var elm = $compile(scope.corpo)(scope);
             element.replaceWith(elm);
        }
    }
});

And in your html, you go over the variable body that is in the "modal":

<div class="modal-body">
   <modal-corpo corpo="corpo"></modal-corpo>
</div>