在typeScript&amp ;;中更新来自另一部分视图的部分视图angularjs

时间:2013-09-23 07:41:41

标签: asp.net-mvc-3 angularjs typescript

我需要从另一个局部视图更新局部视图。我使用的技术是angular.js typescript和ASP.Net MVC3。一个局部视图包含一个按钮和一个标签。下一个局部视图只包含一个标签。单击按钮后,同一局部视图中的标签显示一些值,同样的值应显示在其他局部视图的标签中。我认为在angualrjs中的nginclude将有助于实现这个东西。

第一部分视图

<div class="my_giving_portfolio" ng-controller="DonationServiceController">
    <div class="my_giving_port_header fontfamilyGeorgia fontsize20">my giving portfolio</div>
    <div class="my_giving_port_container">
        <div class="my_givings">
            <div class="portfolio_charity clearfix" ng-repeat="Tile in VM.Tiles">              
                <div class="donate_charity">
                    <a class="add" href="javascript:void();" ngclick="Tile.IncrementDonation()">plus</a>
                    <p class="amount">{{Tile.DonationContainer.Amount}}</p>                 
                </div>              
            </div>          
        </div>
    </div>
</div>

第二部分视图

<div id="dashboard_right_top" ng-controller="DonationHistoryServiceController" ng-include="_myGivingPortfolio.cshtml">
            <div class="my_giving_box" >
                <h3 class="my_giving_title">My Giving</h3>
                <div class="my_giving_price_box">
                    <div class="my_giving_price_in">
                        <h3 class="fontfamilyHelveticaNeueRegular fontsize30">${{VM.MyGivingMonthly}}</h3>
                        <p class="fontfamilyHelveticaLight fontsize12">This Month</p>
                    </div>                       
                 </div>
               </div>

但实际上我对使用typescript和angualrjs如何做到这一点没有正确的想法。有谁知道怎么做?

2 个答案:

答案 0 :(得分:1)

我建议在angularjs中查看路由支持。特别是$ routeProvider的API文档

答案 1 :(得分:1)

你想看一下angular-ui-router,它在很大程度上用$ stateProvider取代了$ routeProvider。它允许嵌套的“状态”,这些状态基本上是路由但更好。文档也非常好。

例如,您可以拥有一个包含多个子状态的状态,每个状态都有自己的视图模板和控制器(如果您愿意)。还可以让您轻松地在很多其他很酷的事物之间共享孩子和父母之间的数据。

就个人而言,我再也不会使用$ routeProvider,我只使用angular-ui-router和$ stateProvider,因为它在我的经验中各方面都非常优越。

看看这里:

https://github.com/angular-ui/ui-router/wiki