您的位置：首页 > 产品设计 > UI/UE

angular.js学习 ui-router 0.2.15

2015-11-09 08:27 447 查看
1. ui-router 是以状态驱动的，一个状态等价于该应用内的一个ui部分。

2，使用实例如下，当一个状态被激活后，它所代表的模板html就会被插入到ui-view中。

　　

<!-- in index.html -->
<body ng-controller="MainCtrl">
<section ui-view></section>
</body>




3.  如何激活一个state，方法有三：

　　1.调用$state.go(
to [, toParams] [, options]
),to参数是以".”来分隔父状态和子状态

$state.go('contact.detail')
 将会跳到 'contact.detail'状态

$state.go('^')
 将会跳到父状态.

$state.go('^.sibling')
 将会跳到兄弟状态.

$state.go('.child.grandchild')
 将会跳到子孙状态.

$state.go()


Click a link containing the 
ui-sref
 directive. Learn More

Navigate to the 
url
 associated with the state. Learn More

4. 如何定义state对应的template

$stateProvider.state('contacts', {   // 直接写入template内容
template: '<h1>My Contacts</h1>'
})

$stateProvider.state('contacts', {
templateUrl: 'contacts.html'　　    // 填写template文件地址
})

$stateProvider.state('contacts', {
templateUrl: function ($stateParams){
return '/partials/contacts.' + $stateParams.filterBy + '.html'; //template是一个function 返回值为template文件地址
}
})

$stateProvider.state('contacts', {
templateProvider: function ($timeout, $stateParams) {
return $timeout(function () {
return '<h1>' + $stateParams.contactId + '</h1>'
}, 100);
}
})

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航