Question

Tengo una variable que responde por ng-model, a unos errores que vienen del back, esta variable se visualiza en un modal de bootstrap.

Sin embargo, quiero que al ocultar la modal, esa variable sea "null" pero no he podido realizarlo, no se si sea un problema de los scopes o algo asi.

Aqui esta mi app.js

    angular.module('BootstrapTest', ['ngRoute'])
.directive('modalLoginForm', function(){
    return {
        restrict: 'E',
        templateUrl: 'modal-login.html',
        controller: 'LoginUserController',
        link: function($scope, $element, $attributes) {
            console.log("Formulario Login -- listo");
            // do what you want here.
        }
    };
}).directive('loginForm', function(){
    return {
        restrict: 'E',
        templateUrl: 'login.html',
        controller: 'LoginUserController',
        link: function($scope, $element, $attributes) {
            console.log("Formulario Login -- listo");
            // do what you want here.
        }
    };
}).controller('LoginUserController', [
    '$window',
    '$scope',
    function($window, $scope) {
        var self = this;
        self.userData = {
            email: '[email protected]'
        };
        self.messages = null;

        self.loginUser = function(){

            //XHR request
            var responseSimulated = [
                'gomu gomu no pistol, Error from back'
            ];

            self.messages = responseSimulated;

            /* How do this correctly */
            $("#myModal").on('hidden.bs.modal', function (e) {
                // do something...
                alert('aaaww yeah');
                self.messages = null;
            });
        };
    }]);

Luego la parte del index

<h2>Pruebas de Modal Scope</h2>
<a href style="cursor: pointer" data-toggle="modal" data-target="#myModal">Login</a>
<modal-login-form></modal-login-form>

Mi formulario de Login

<div class="form-wrapper" ng-controller="LoginUserController as loginUserCtrl">

    <div ng-show="loginUserCtrl.messages !== null" role="alert" class="alert"
        <span ng-repeat="texto in loginUserCtrl.messages">{{ texto }}</span>
    </div>

    <form name="frm_LoginUser" id="frm_LoginUser" role="form"
          ng-submit="frm_LoginUser.$valid && loginUserCtrl.loginUser()"
          novalidate>

        <div class="form-group has-feedback">
            <label class="control-label" for="email">email</label>
            <input type="email" name="email" id="email" ng-model="loginUserCtrl.userData.email"
                   required
                   class="form-control">
        </div>

        <button type="submit" class="btn btn-primary btn-block">Submit</button>
    </form>
</div>

Y por ultimo el modal donde llamo el login

<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Iniciar Sesión</h4>
            </div>
            <div class="modal-body">
                <div ng-include="'login.html'"></div>
            </div>
        </div>
    </div>
</div>

Y listo como ven ? Por favor necesito de su ayuda, de ser posible "No utilizar Angular Bootstrap UI" por que si es una libreria completa y todo, pero luego solo utilizamos librerias sin saber como se ocupan las cosas.

Saludos y gracias

Answer 1

No estas haciendo un correcto enlace entre tu vista y tu controlador, deberías usar $scope. luego de actualizar $scope, debes usar $digest() para actualizar el modelo, gran parte del tiempo angular llama por nosotros a $digest(), pero en ocasiones como esta debemos hacerlo nosotros.

intenta que tu controlador tenga esta forma:

.controller('LoginUserController', [
    '$window',
    '$scope',
    function($scope)
    {
        $scope.userData = {
            email: '[email protected]'
        };
        $scope.messages = null;

        $scope.loginUser = function(){

            //XHR request
            var responseSimulated = [
                'gomu gomu no pistol, Error from back'
            ];

            $scope.messages = responseSimulated;

            /* How do this correctly */
            $("#myModal").on('hidden.bs.modal', function (e) {
                // do something...
                alert('aaaww yeah');
                $scope.messages = null;
                $scope.$digest();
            });
        };
    }
]);

y tu vista:

<div class="form-wrapper" ng-controller="LoginUserController">

    <div ng-show="messages !== null" role="alert" class="alert"
        <span ng-repeat="texto in messages">{{ texto }}</span>
    </div>

    <form name="frm_LoginUser" id="frm_LoginUser" role="form"
          ng-submit="frm_LoginUser.$valid && loginUser()"
          novalidate>

        <div class="form-group has-feedback">
            <label class="control-label" for="email">email</label>
            <input type="email" name="email" id="email" ng-model="userData.email"
                   required
                   class="form-control">
        </div>

        <button type="submit" class="btn btn-primary btn-block">Submit</button>
    </form>
</div>

de esta forma si el modelo cambia, la vista tambien.

PD: links de interés:

https://elabismodenull.wordpress.com/2015/03/26/watch-y-digest-entendiendo-el-servicio-scope-de-angularjs/
http://www.desarrolloweb.com/articulos/ambito-scope-controladores-ap.html