Pass directive inside template

Asked

Viewed 1,233 times

4

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

maintain-supplier-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;
        }
    };
}]);

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;
    };
}]);

excerpt from the code that calls the 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 template:

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

result obtained:

inserir a descrição da imagem aqui

How I print the keep-vendor-form directive within the modal ?

angularjs angularjs-directives template angularjs-scope

3 answers

3


You can create another directive called "modal-body" 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 pass the body variable that is in "modal":

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

  • In case I won’t need the id="modalcontent", right ?

  • That, you can take!

  • Success, Thank you.

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>");
});

  • I used $Compile, but now it’s blank.

  • Yes, it’s blank because you have no content in the directive. Take the test: $Compile("<keep-vendor-form> Here’s the directive!!! </maintain-supplier-form>");

  • Still came blank, this has a template that is printed without passing values. I already use it in another part of the system.

  • Your keep-vendor-form directive is set where?

  • I updated the question with the keep-vendor-form.js file in full.

  • It turns out he can’t find your file. Is it really in this directory? Try to use the relative path

  • As I said earlier, this directive is used elsewhere in the system, so I believe that is not the problem. I published an answer, see if it gives a light.

  • Take a test and remove the restrict attribute

Show 3 more comments

0

I was given the code below to circumvent the problem, but I believe it’s not the best way, someone has 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"
    }
});

Browser other questions tagged angularjs angularjs-directives template angularjs-scope

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