Re-render same angular template

Question

When I am loading index.html page then by default UI router is loading home.html After click on name of home page data I am showing list.html page as a child template.
As per selected home data I am fetching data for list.html from server but here sample purpose I am not fetching data from server I have just shown skeleton of code, so currently I am just fetching data from static array.

Now when you click on any name column of home data then I am loading 2nd template(list.html) as child template and in console you will get "listController loaded" message but now when you again click on name column of home page data then my 2nd template is not re rendering and for testing purpose you can check console there you will not get console message again.

According to my scenario when user click on name column of home page data then that selected name I am passing as parameter to my server and according to that I am displaying data on 2nd template(list.html). This scenario is working perfectly for 1st time if I click again on name column of home page then my second template is not refreshing/reloading again with new data

Index.html

<!DOCTYPE html>
<html>
<head>
    <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>

<!-- apply our angular app to our site -->
<body ng-app="demoApp">
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
    <div ui-view></div>
</div>
</body>
</html>

home.html

<h2>Home Data</h2>
<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Cost</td>
        </tr>
    </thead>
    <tbody>

        <tr ng-repeat="data in homeData">
            <td ng-click="clickOfButton">{{ data.name }}</td>
            <td>${{ data.price }}</td>
        </tr>

    </tbody>
</table>
<div ui-view></div>

list.html

<h2>List Data</h2>
<table>
    <thead>
        <tr>
            <td>Name</td>
            <td>Cost</td>
        </tr>
    </thead>
    <tbody>

        <tr ng-repeat="data in listData">
            <td>{{ data.name }}</td>
            <td>${{ data.price }}</td>
        </tr>

    </tbody>
</table>

app.js

var demoApp = angular.module('demoApp', ["ui.router"]);
demoApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
  $stateProvider
    .state('home', 
    {
        url: '/home',
        templateUrl: 'home.html',
        controller: 'homeController'
    })
    .state('home.list', 
    {
        url: '/:list',
        templateUrl: 'list.html',
        controller: 'listController'
    })

});
// This factory is used to fetch data for list.html from server.
demoApp.factory('demoFactory',function($q,$rootScope)
{  
    var demoFactoryObj = {};  
    demoFactoryObj.getData = function()
    {  

    }  
    return demoFactoryObj;  
});  

demoApp.controller('homeController',function( $scope,$location )
{  
     $scope.homeData = [
        {
            name: 'Macallan 12',
            price: 50
        },
        {
            name: 'Chivas Regal Royal Salute',
            price: 10000
        },
        {
            name: 'Glenfiddich 1937',
            price: 20000
        }
    ];
    $scope.clickOfButton = function()
    {
        $location.path('home/list');
    }

});
demoApp.controller('listController',function( $scope,demoFactory)
{  
    // When this controller will load then by default I am invoking this factory to get data from server. 
    //But currently I am showing you static demo.
    /*demoFactory.getData().then(function(result)
    {  
        $scope.listData = result;

    });*/
    console.log('listController loaded');
    $scope.listData = [
        {
            name: 'Abc',
            price: 50
        },
        {
            name: 'pqr',
            price: 10000
        },
        {
            name: 'xyz',
            price: 20000
        }
    ];

});

Answer 1

Inject $state instead of $location and use $state.go :

$scope.clickOfButton = function() {
  $state.go('home.list', { list: 'someName' }, { reload: true });
}

Where someName is what you want showing in the URL:

/#/home/someName

To retrieve the value of the list parameter you can inject $stateParams and access it like this:

demoApp.controller('listController', function($scope, demoFactory, $stateParams) {

  console.log($stateParams.list);

Re-render same angular template

Question

1 answers

solution1
0 ACCPTED 2014-06-08 13:34:40

Re-render same angular template

Question

1 answers

solution1 0 ACCPTED 2014-06-08 13:34:40

solution1
0 ACCPTED 2014-06-08 13:34:40