Need to refresh angular app on button click

Question

I started to create a single page application that takes the input from a text box and shows up to another page. On the second page I wanted to create a home button that takes me to the original view but also refreshes the application the input box to a blank state.

first 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 fuunction

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 have tried How to reload a page using Angularjs?. as well. Please Help!. Thanks

Do you just want to clear the input when you navigate back to the original view? — David Barker
– David Barker, Commented Jun 24, 2016 at 2:22
Essential yes. I wanted to create multiple pages with an option to go home — woods
– woods, Commented Jun 24, 2016 at 2:38
You could set your defaults in angular and then on the button click (ng-click) use $scope.$apply() to 'refresh' the data back it's defaults — mwilson
– mwilson, Commented Jun 24, 2016 at 2:39
using location.reload() is a really bad practice since, it will reload all your services, controllers and scripts. I would recommend you to have that specific state reload rather than reloading the location itself. i.e, better use $stateProvider that comes with ui.routing as for your case. — Sunil Lama
– Sunil Lama, Commented Jun 24, 2016 at 2:45

alecschrader · Accepted Answer · 2016-06-24 02:55:41Z

-1

Use this in your reload function

$scope.name = '';
$scope.$apply();
window.location.replace('pages/first.html'); //your first page

answered Jun 24, 2016 at 2:55

alecschrader

3713 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

woods Over a year ago

Yea this didn't work.the instead it blocked the content that is typed in the input on the first page.Would it be possible to grab the binded info and reset it from another controller?

Collectives™ on Stack Overflow

Need to refresh angular app on button click

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related