Question

当我加载index.html页面时，默认情况下，UI路由器正在加载home.html 点击主页数据名称后，我将list.html页面显示为子模板。
根据选定的家庭数据，我从服务器获取list.html的数据，但这里的示例目的我没有从服务器获取数据我刚刚显示了代码的骨架，所以目前我只是从静态数组中获取数据。

现在，当您点击家庭数据的任何名称列时，我正在加载第二个模板（list.html）作为子模板，在控制台中您将获得“listController loaded”消息，但现在当您再次单击主页的名称列时页面数据然后我的第二个模板没有重新渲染，为了测试目的，你可以在那里检查控制台，你将不会再次获得控制台消息。

根据我的情况，当用户点击主页数据的名称列然后选择的名称我作为参数传递到我的服务器，并根据我在第二个模板（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 });
}

您希望在网址中显示someName的位置：

/#/home/someName

要检索list参数的值，您可以注入$stateParams并像这样访问它：

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

  console.log($stateParams.list);

重新渲染相同的角度模板

1 个答案: