$Scope Form Angularjs Directive

Question

I am having difficulty in creating a directive on the following point.

I have a data listing, and in this listing I have a callController controller, and in this listing page I have a modal that calls a template made with the directive:

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

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

});

I have another controller that calls editController la has a function responsible for calling the modal and popular the inputs that are in the modal coming via template by directive, but it does not work I realize that editController does not "see" the ng-model of the template. Now if I put in the same controller where the modal this is callController works normally.

Look at the directive:

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

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

});

Already from Scope as false and nothing.

Answer 1

To communicate the values using the controller, which seems to me to be your case, you can define the value to be passed to the modal through a $rootScope, which would be a global "variable". I recommend that you be careful with the use of $rootScope, because if there is abuse, you may end up having future problems with the use of this Scope.

To use it, simply boot into the controller and then set the value to $rootScope. In the following modules, you no longer need to reference $rootScope, just as $Scope, since it has already been set. In your case, it would look something like this:

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

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

Or you can reference through a Factory, for example:

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

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

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

And on the controller:

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

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

Would that be your question?

Edited

I saw Mayllon Baumer’s answer only then, I was working on mine. But I had the same problem once and the Mayllon solution did not work in my case because the modal was an external module, and the data was not being passed, no matter what I did. But it might work for you.

Answer 2

See if this example helps you:

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>

Answer 3

You can try the following, use the object that contains the information you want to send to the modal as two way data Binding, would be more or less like this:

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: '='
}
    }

});