I've encountered an issue while trying to change the view being displayed through a broadcast in my application. Despite updating the model in the controller, the ng-show does not reflect the new state.
To make the RegisterForm controller visible, I am using
$rootScope.$broadcast("registerFormShow", username, password)register.active variable, however, it does not seem to update as expected. I attempted calling $scope.$apply() from within the $on callback but received an error message stating that $apply is already in progress. Can anyone shed light on why this might be happening?
Here is a snippet of the relevant code:
app.controller("LoginController", ["$http", "$rootScope", function($http, $rootScope){
this.openRegister = function(username, password){
$rootScope.$apply(function(){
$rootScope.$broadcast("register", username, password);
});
this.loggedIn = true;
console.log("register event sent");
}
}]);
app.controller("RegisterController", ["$http", "$scope", function($http, $scope){
this.active = false;
$scope.$on("register", function(username, password){
this.active = true;
}
}]);
HTML:
<div ng-controller="RegisterController as register" ng-show="register.active" class="cover">
<div class="form register-form" ng-class="{indeterminate: register.indeterminate}">
<input type="text" name="username" required="" ng-model="username" />
<input type="password" required="" ng-model="password" />
<button ng-click="register.register(username, password)">Register</button>
</div>
</div>
For a demo showcasing this problem, visit: http://jsfiddle.net/7LLa7zot/1/