0

Estou tendo dificuldade em criar um directiva no seguinte ponto.

Tenho uma listagem de dados, e nesta listagem tenho um controller callController, e nesta pagina de listagem tenho uma modal que chama um template feito com a diretiva:

angular.module('app.directives')
.directive('formCall', function(appAngularConfig) {

    return {
        templateUrl: appAngularConfig.baseUrl + "/build/js/views/templates/__form_call.html",
        restrict: "E"
    }

});

Tenho um outro controller que chama editController la tem uma função responsável por chamar a modal e popular os inputs que estão na modal vindo via template pela diretiva, só que não funciona percebo que o editController não "enxerga" o ng-model do template. Agora se eu colocar no mesmo controller onde a modal esta ou seja o callController funciona normalmente.

Olha a diretiva:

angular.module('app.directives')
.directive('formCall', function(appAngularConfig) {

    return {
        templateUrl: appAngularConfig.baseUrl + "/build/js/views/templates/__form_call.html",
        restrict: "E",
    }

});

Ja de scope como false e nada.

1
  • Você pode tentar fazer a comunicação entre eles determinando o valor em um factory e fazendo essa referência ali. Ou então, no primeiro controller você pode definir o seu $scope como $rootScope. Já tentou algo assim? Commented 9/11/2015 às 18:23

3 Respostas 3

1

Para fazer a comunicação dos valores usando o controller, que me parece ser o seu caso, você pode definir o valor a ser passado ao modal através de um $rootScope, que seria uma "variável" global. Recomendo que tenha cuidado com o uso do $rootScope, pois se houver abuso, você pode acabar tendo problemas futuros com o uso desse scope.

Para usar ele, basta inicializar no controller e depois definir o valor ao $rootScope. Nos módulos seguintes, você não precisa mais fazer a referencia como $rootScope, apenas como $scope, já que ele já foi definido. No seu caso, ficaria algo assim:

.controller('callController', function($rootScope) {
    $rootScope.modalData = [item];
});

.controller('editController', function($scope) {
    var minhaData = $scope.modalData;
    $scope.modal = $scope.modalData;
    //e por ai vai.. 
});

Ou você pode referenciar através de um factory, por exemplo:

.factory('factPrincipal', function ($http){
    var _modal = false;

    var getData = function() {
        return $http.get('dist/data.json');
    };

    return {
        getData: getData()
    };
}])

E no controller:

.controller('callController', function($scope, factPrincipal) {
    $scope.modalData = factPrincipal.getData();
});

.controller('editController', function($scope, factPrincipal) {
    $scope.modal = factPrincipal.getData();
});

Seria essa sua dúvida?

Editado

Vi a resposta do Mayllon Baumer só depois, estava elaborando a minha. Mas eu tive o mesmo problema uma vez e a solução do Mayllon não funcionou no meu caso pois o modal era um módulo externo, e os dados não estavam sendo passados, não importa o que eu fizesse. Mas pode ser que para você funcione.

9
  • Celsom, realmente usando o $rootScope funciona, mas não queria utiliza - lo pelo medo de perder o controle por ser uma variavel global. O que eu percebo como o formulario é uma diretiva com template o ng-model deste formulario não é enxergado em outro controller. Somente no controller que chama a pagina onde a modal se encontra. Commented 9/11/2015 às 18:43
  • Você mesmo criou o modal ou é algum open source? Já tentou a solução do Mayllon? Commented 9/11/2015 às 18:45
  • Ps.: No meu caso, quando eu realmente preciso de um $rootScope, eu sempre faço a declaração com o prefixo _ ex.: $rootScope._algumaCoisa assim eu sei que se existir um $scope._algumaCoisa, na verdade é uma referência à uma variável global. Se não houver outra saída, é uma questão de montar um fluxo bom para você. Comigo funcionou assim. Commented 9/11/2015 às 18:47
  • Hummm, boa dica. Vou usar dessa forma que vc disse então. Commented 9/11/2015 às 18:48
  • Não há jeito de transferir ou mesclar os dois controllers? Qual o objetivo de você possuir 2 controllers que vão interagir com o mesmo modal? Commented 9/11/2015 às 18:51
0

Veja se esse exemplo te ajuda:

var app = angular.module('app', []);

angular.module('app').controller('igCtrl', function ($scope) {

    $scope.email = "";
    $scope.pwd = "";
    
    $scope.algumaCoisaQualquer = "JEC não cai!!!! cvai e figay vão cair!!!";
    
    $scope.loggedIn = false;
    $scope.loggingIn = false;

    $scope.showLogin = function () {
        $scope.loggingIn = true;
    };

    $scope.logout = function () {
        // do your logout logic
        $scope.user = null;
        $scope.loggedIn = false;
    };

    $scope.login = function () {
        // do your login logic
        $scope.loggingIn = false;
        $scope.loggedIn = true;
    };
});

app.directive('igLogin', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div>' +
'  <div class="modal fade" id="loginModal" tabindex="-1" + role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" > ' +
'    <div class = "modal-dialog" > ' +
'      <form name = "form" ng - submit = "submit()" > ' +
'        <div class = "modal-content" > ' +
'          <div class = "modal-header" > ' +
'            <button type="button" class = "close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()" > Cancel </button>' +
'              <h3>{{algumaCoisaQualquer}} </h3 > ' +
'          </div>' +
'          <div class="modal-body">' +
'            <table border="0"><tr><td>Email: </td><td><input type="email" ng-model="email"></input > </td></tr> ' +
'            <tr><td>Password: </td><td><input type = "password" ng-model = "pwd" > </input></td></tr>' +
'            <tr><td colspan="2"><input type="submit" class="btn btn-primary" id="submit" ng-click="submit()" value="Login"></input ></td></tr></table> ' +
'          </div>' +
'        </div > ' +
'      </form>' +
'    </div > ' +
'  </div>' +
'</div > ',
        controller: function ($scope) {
            
            $scope.submit = function() {
                $scope.login();
		        $("#loginModal").modal('hide');
            };
            
            $scope.cancel = function() {
                $scope.loggingIn = false;
		        $("#loginModal").modal('hide');
            };
            
            $scope.$watch('loggingIn', function() {
                if ($scope.loggingIn) {
		            $("#loginModal").modal('show');
                };
           });   
        }
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="igCtrl"> 
        <a href="#" ng-hide="loggedIn" ng-click="showLogin()">login</a>
        <a href="#" ng-show="loggedIn"ng-click="logout()">logout</a>
        <ig-login></ig-login>
    </div>
</div>

0

Você pode tentar o seguinte, utilize o objeto que contem as informações que quer enviar para a modal como two way data binding, seria mais ou menos assim:

angular.module('app.directives')
.directive('formCall', function(appAngularConfig) {

    return {
        templateUrl: appAngularConfig.baseUrl + "/build/js/views/templates/__form_call.html",
        restrict: "E",
scope:{
seuObjecto: '='
}
    }

});

angular.module('app.directives')
.directive('formCall', function(appAngularConfig) {

    return {
        templateUrl: appAngularConfig.baseUrl + "/build/js/views/templates/__form_call.html",
        restrict: "E",
scope:{
seuObjecto: '='
}
    }

});
2
  • Mayllon Baumer, obrigado pela ajuda, mas não da. Porque estou com problema no ng-model do form carregado pela diretiva do template quando a modal se abre. So o controller que esta carregando a modal que funciona. Se eu chamar em outro controller, que é o que estou querendo ele não enxerga o ng-model do form. Commented 9/11/2015 às 18:46
  • Hmmm, veja se isso não resolve: pt.stackoverflow.com/questions/94871/… Commented 9/11/2015 às 18:53

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 .