0
I have the following directive that builds a modal. Arquivo: login.component.js
(function() {
'use strict';
var app = angular.module('myapp');
app.directive('loginComponent', ['loginService', function(loginService){
return {
templateUrl: 'app/components/login/login.html',
restrict: 'E',
replace: true,
controller: 'homeCrotroller',
link: function ($scope) {
$scope.submit = function() {
$scope.login();
$("#modal-login").modal('hide');
};
$scope.cancel = function() {
$scope.loggingIn = false;
$("#modal-login").modal('hide');
};
$scope.$watch('loggingIn', function() {
if ($scope.loggingIn) {
$("#modal-login").modal('show');
};
});
}
};
}]);
})();
And the following controller. Arquivo: home.crotroller.js
(function() {
'use strict';
var app = angular.module('myapp');
app.controller('homeCrotroller', ['$scope', function($scope){
$scope.loggedIn = false;
$scope.loggingIn = false;
$scope.showLogin = function () {
$scope.loggingIn = true;
};
$scope.logout = function () {
$scope.user = null;
$scope.loggedIn = false;
};
$scope.login = function () {
$scope.loggingIn = false;
$scope.loggedIn = true;
};
}]);
})();
And in my view I call the function showLogin()
<a class="login" id="btn-login" href="javascript:void(0);" ng-click="showLogin()" title="Entrar">Entrar</a>
This function changes the value $scope.loggingIn for true, only that this value is not reaching directive. Only arrives the first status (when loading the screen) that is false
you already tried to add the property
scope: truein its directive?– celsomtrindade
Can you post your html for me to see? I suspect your "Log in" button is outside your directive, so it may not have access to
controller.– celsomtrindade
This is @Celsomtrindade, I haven’t tried! By default it’s no longer true? But I’ll try, with the result! Thanks.
– Rafael Alves
Your mistake must be something simple, because your code seems ok.
– celsomtrindade
The button has access to the controller, pq if I add an Alert for example in the function
showLogin()by clicking the Alert is displayed!– Rafael Alves
If you value the loggingIn on Alert, what it displays after clicking?
– celsomtrindade
Yes! It seems that the
$scope.$watchis not watching the loggingIn changes.– Rafael Alves
A question... if you are using Directive only to give a show/Hide.. Why don’t you use an ng-if="" or ng-show instead of having a directive to replace the entire template and use the watch to check?
– celsomtrindade
I will use this modal on various screens, and I will also consume a login service. You do not find it interesting to use the directive?
– Rafael Alves
It is in this case will depend on your structure. The directive is the best use in this case yes.. But I refer to the following.. In your modal template, use a modal template
ng-if="loggingIn"instead of working with $watch checking the value. See if it works– celsomtrindade
It makes sense @Celsomtrindade! I’ll do it.
– Rafael Alves
Have you found a friend? If you can close the topic. Otherwise, try to put in the directive function, Scope: { loggingIn: '=' } and also do not forget to initialize in the directive element (<login-Component loggingIn="loggingIn"></login-Component>). And obviously loggingIn has to come from some controller, of course, not from the directive’s own controller.
– Kelwen Souza