I am facing an issue with my web app which is built using AngularJS. I have two functions in my code - one declared on the $rootScope and the other on the $scope. The code snippets are shown below:
app.js
app.run(function ($rootScope, $location) {
$rootScope.settings_Click = function() {
$console.log('clicked in root scope.');
$location.url('/user/settings');
};
});
viewController.js
app.controller('ViewController', function($scope, $rootScope, $location) {
$scope.settings_Click = function() {
$console.log('clicked in local scope.');
$location.url('/user/settings');
};
});
Even though both of these functions are being called, only the latter one successfully redirects to the /user/settings view. I am puzzled as to why this is happening. When I trigger the settings_Click event that uses $rootScope, no errors are thrown but the user gets redirected back to the first page of the app instead of the settings page. However, the redirect logic in both $scope and $rootScope is the same.
Can anyone shed some light on why there is a difference in the redirect behavior between $scope and $rootScope?