ui-sref指令 - Githubissues

实现的作用其实就是路由之间的切换以及参数的传递。

具体用法：

例如：

<a ui-sref="index">按钮</a>

在a标签中使用ui-sref，当JavaScript重新生成网页时，它会查找$state中名为“index”的state，读取这个state的url，然后在a标签里生成href=""url。

结果为：<a ui-sref="index" href="#/index.html">按钮</a>

注意：ui-sref不支持动态绑定，sref中你只能用state名，可以添加参数。如果需要动态的话，就只能放弃sref，用回href绑定，可以使用$state.href来读取state的url。（所谓的动态指的是通过循环数组生成标签以及标签内容）

PS:html结构加参数的时候是括号之后再一个花括号。

html层：

<body>
    <a ui-sref="index({id:1,name:2})">index</a>
    <a ui-sref="home({id:2})">home</a>
    <!-- 路由在html在配置作用域，才可以进行切换、跳转 -->
    <div ui-view=''></div>
</body>

js层：

<script src="js/angular.js"></script>
<script src="js/angular-ui-router.js"></script>
<script>
    /*注入路由服务*/
    var app = angular.module('myApp',['ui.router']);
    /*进行路由配置*/
    app.config(['$stateProvider',function($stateProvider){
        $stateProvider.state('index',{
            url:'/index.html?id&name',//参数必须在这里先定义
            templateUrl:'templates/index.html',
            controller:'indexCtrl',
            params:{
                'id':null,
                'name':null
            }
        }).state('home',{
            url:'home.html?id',
            templateUrl:'templates/home.html',
            controller:'homeCtrl',
            params:{
                'id':null
            }
        })
    }])
    /*控制器参数的传递*/
    app.controller('indexCtrl',['$scope','$stateParams',function($scope,$stateParams){
        console.log($stateParams.id)
    }])
    app.controller('homeCtrl',['$scope','$stateParams',function($scope,$stateParams){
        console.log($stateParams.id)
    }])
</script>

效果图如下： before after1 after2

Narutocc / angular

ui-sref指令 #10

具体用法：