重新渲染相同的角模板 [英] Re-render same angular template
问题描述
- 当我加载index.html页面，然后通过默认的UI路由器装载home.html做为
点击首页上的数据名称后我显示list.html页面作为子模板。 - 根据选择的家庭的数据，我从服务器list.html但在这里，样品的目的我不读取数据从服务器获取数据我刚才已经表明code的骨架，所以目前我只是从静态数组取数据。
现在，当您点击回家数据，那么我加载第二个模板（list.html）为子模板，并在控制台，您将获得listController装的消息，但现在当你在家里名列再次单击任何名称列页面数据，那么我的第二个模板不会重新绘制和测试目的，你可以在那里检查控制台，您将不会再得到控制台消息。
根据我的情况时则主页上的数据名称列的用户点击所选择的名字我传递作为参数传递给我的服务器，并根据，我2日模板（list.html）显示数据。此方案为第1次可以正常使用，如果我的主页名称栏再次点击，然后我的第二个模板不清爽/使用新数据再次重装
的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;！ - JS（负载角，UI的路由器，以及我们的定制js文件） - GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.angularjs.org/1.2.13/angular.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =角-UI-router.min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;＆LT;！ - 运用我们的角度应用到我们的网站 - ＆GT;
＆LT;机身NG-应用=demoApp＆GT;
＆LT;！ - 主要内容 - ＆GT;
＆LT;！ - 这就是我们将注入我们的内容============================== - ＆GT;
＆LT; DIV CLASS =容器＆GT;
＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
home.html的
＆LT; H2＆GT;家庭数据＆LT; / H＆GT;
＆LT;表＆gt;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT; TD＆GT;名称和LT; / TD＆GT;
＆LT; TD＆GT;成本与LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT; ＆LT; TR NG重复=数据homeData＆GT;
＆LT; TD NG点击=clickOfButton＆GT; {{data.name}}＆LT; / TD＆GT;
＆所述; TD＆GT; $ {{data.price}}＆下; / TD＆GT;
＆LT; / TR＆GT; ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
list.html
＆LT; H2＆GT;列表数据＆LT; / H＆GT;
＆LT;表＆gt;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT; TD＆GT;名称和LT; / TD＆GT;
＆LT; TD＆GT;成本与LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT; ＆LT; TR NG重复=数据的ListData＆GT;
＆所述; TD＆GT; {{data.name}}＆下; / TD＆GT;
＆所述; TD＆GT; $ {{data.price}}＆下; / TD＆GT;
＆LT; / TR＆GT; ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
app.js
VAR demoApp = angular.module（'demoApp'，[ui.router]）;
demoApp.config（函数（$ stateProvider，$ urlRouterProvider）{
$ urlRouterProvider.otherwise（'/家）;
$ stateProvider
.STATE（家，
{
网址：'/家，
templateUrl：home.html做为'，
控制器：HomeController的
}）
.STATE（'home.list'，
{
网址：'/：名单，
templateUrl：list.html'，
控制器：'listController
}）}）;
//这个工厂用于从服务器list.html获取数据。
demoApp.factory（'demoFactory'，函数（$ Q $ rootScope）
{
变种demoFactoryObj = {};
demoFactoryObj.getData =功能（）
{ }
返回demoFactoryObj;
}）;demoApp.controller（HomeController中'，函数（$范围，$位置）
{
$ scope.homeData = [
{
名称：'麦卡伦12'
价格：50
}，
{
名称：'芝华士，皇家礼炮，
价格：10000
}，
{
名称：1937年格兰菲迪'，
价格：20000
}
];
$ scope.clickOfButton =功能（）
{
$ location.path（家/名单'）;
}}）;
demoApp.controller（'listController'，函数（$范围，demoFactory）
{
//当该控制器将被默认加载那么我调用这个工厂从服务器获取数据。
//但是现在我向您展示静态演示。
/*demoFactory.getData().then(function(result）
{
$ scope.listData =结果; }）; * /
的console.log（'listController装'）;
$ scope.listData = [
{
名称：'ABC'，
价格：50
}，
{
名称：PQR，
价格：10000
}，
{
名称：'某某'，
价格：20000
}
];}）;
注入 $状态而不是 $位置并使用 $ state.go ：
$ scope.clickOfButton =功能（）{
$ state.go（'home.list'，{名单：someName'}，{重装：真}）;
}
其中， someName 是要显示的网址是什么：
/＃/家/ someName
要检索列表参数是这样的价值你可以注入 $ stateParams 和访问：
demoApp.controller（'listController'，函数（$范围，demoFactory，$ stateParams）{ 的console.log（$ stateParams.list）;
- 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
}
];
});
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);
这篇关于重新渲染相同的角模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
