$ scope Form Angular Directive

Question

$ scope Form Angular Directive

Navigation

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

0

I'm having trouble creating a directive at the following point.

I have a list of data, and in this list I have a controller callController, and in this list 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 and it has a function responsible for calling the modal and popular the inputs that are in modal come via template by the directive, but it does not work I realize that the editController does not "see" the ng-model of the template. Now if I put in the same controller where the modal this is the 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",
    }

});

Ha of scope as false and nothing.

angularjs angularjs-directives

asked by anonymous 09.11.2015 / 19:08

3 answers

0

See if this example helps:

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><scriptsrc="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><divng-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>

09.11.2015 / 19:26

0

You can try the following, use the object that contains the information you want to send to modal like two way data binding, it would look something 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: '='
}
    }

});

09.11.2015 / 19:30

Upgrading a site to a newer version of Rails Ajax code is not taking the value of the inputs

score 1 · Accepted Answer

To communicate values using controller , which seems to be your case, you can set the value to be passed to modal via a $rootScope , which would be a global "variable". I recommend that you be careful about using $ rootScope, because if there is abuse, you may end up having future problems with using 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 defined. 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 in 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 response only later, I was working on mine. But I had the same problem once and Mayllon's 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.