Recently, I embarked on developing a single-page application that allows users to input data in a text box and navigate to another page. While designing the second page, I aimed to incorporate a home button that would not only return me to the initial view but also reset the input box to a blank state.
Initial View
<input type="text" id="Bad" style="text-transform:uppercase" ng-model="name" />
Second View
<h3>Hello</h3>
<span ng-bind="name"></span></br>
<a href="#" ng-click="reload()">
<img src="Home_Icon.png" height="92" />
</a>
app .js Controllers
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider.when('/second', {
templateUrl: 'pages/second.html',
controller: 'secondController'
});
});
Controller Function
myApp.controller('secondController', [
'$scope',
'$log',
'$routeParams',
'$window',
'nameService',
function ($scope, $log, $routeParams, nameService) {
$scope.num = $routeParams.num || 1;
$scope.name = nameService.name;
$scope.$watch('name', function () {
nameService.name = $scope.name;
});
$scope.reload = function () {
location.reload();
}
}]
);
I've attempted to reference How to reload a page using AngularJS? for guidance. Any assistance would be greatly appreciated! Thank you.