重新渲染相同的角度模板

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