Reputation: 306
I have an angularJS directive, which has it's templateUrl property set to a function, that determines which template to use based on a service function. When the service finishes a certain job (which is triggered by an event inside the directive too), it triggers a callback, which modifies the directive's scope, and should call a "redraw" of the directive. And by redraw, I mean call the templateUrl function, and update the template properly based on new values inside the service. I have no idea how to call this redraw/update, and google was no use with my problem.
application.directive('loginform', ['authorization', function(auth) {
return {
restrict: 'E',
transclude: true,
replace: true,
templateUrl: function(element, attributes)
{
if(auth.token() != "")
{
return "/client/templates/loginForm_disabled.html";
}
else
{
return "/client/templates/loginForm_enabled.html";
}
},
link: function($scope, element, attributes) {
$scope.username = "";
$scope.password = "";
$scope.message = "";
//this function is called on a button press.
$scope.login = function() {
auth.login($scope.username, $scope.password, function (success) {
if(!success)
{
$scope.message = "Login was unsuccessful";
}
else
{
$scope.message = "";
}
//call a redraw/update of the template
});
}
}
}
}]);
Upvotes: 2
Views: 2782
Reputation: 109
try using $scope.$apply()
the details of this questions might help.
How to modify scope from within a directive in AngularJs
Upvotes: 0