重新渲染相同的角度模板

Question

當我加載index.html頁面時，默認情況下，UI路由器會加載home.html。單擊主頁數據名稱后，我將list.html頁面顯示為子模板。
根據選定的家庭數據，我正在從服務器中獲取list.html的數據，但此處出於示例目的，我不是從服務器中獲取數據，我只是顯示了代碼框架，因此當前我僅從靜態數組中獲取數據。

現在，當您單擊主頁數據的任何名稱列時，我正在加載第二個模板（list.html）作為子模板，並且在控制台中，您將收到“ listController loading”消息，但是現在當您再次單擊主頁數據的名稱列時，我的第二個模板沒有重新渲染，出於測試目的，您可以檢查控制台，那里不會再出現控制台消息。

根據我的情況，當用戶單擊主頁數據的名稱列時，然后將所選的名稱作為參數傳遞給服務器，並根據此信息，我在第二個模板（list.html）上顯示數據。 如果我再次單擊主頁的名稱列，則此方案第一次可以正常運行，那么我的第二個模板沒有刷新/重新加載新數據

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

注入$state而不是$location並使用$state.go ：

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

您想在URL中顯示someName位置：

/#/home/someName

要檢索list參數的值，可以注入$stateParams並按如下方式訪問它：

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

  console.log($stateParams.list);

重新渲染相同的角度模板

問題描述

1 個解決方案

解決方案1
0 已采納 2014-06-08 13:34:40

重新渲染相同的角度模板

問題描述

1 個解決方案

解決方案1 0 已采納 2014-06-08 13:34:40

解決方案1
0 已采納 2014-06-08 13:34:40