angular（$location）

陆甫

2023-12-01

1、 $l o c a t i o n 当我们在某一个模板中需要通过事件跳转或是手动跳转，需要用到此参数通过$ location.path(‘路径’)
2、传参
在路径后面通过追加/参数进行传参
在when中，通过 “/路径/:变量名”

可以通过$routeParams进行参数的接收，格式为
$routeParams.变量名；此处的变量名与冒号后的变量名保持一致

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <meta charset="utf-8">
</head>
<body ng-app="app">
    <div user-info></div>

    <h1>欢迎来到腾讯企业邮箱</h1>
    <div>
        <a href="#!receive">收件箱</a>
        <a href="#!send/abc">发件箱</a>
    </div>
    <div ng-view></div>
    <script>
        var app = angular.module('app',['ngRoute']);
        app.directive('userInfo',function(){
            return{
                restrict:'EA',
                template:'<div>{{name+":"+age}}</div>',
                controller:function($scope){
                    $scope.name = "张三";
                    $scope.age = 20;
                }
            }
        });
        app.config(['$routeProvider',function($routeProvider){
            $routeProvider.when('/home',{
                template:''
            })
            .when('/receive',{
                template:'<ul><li ng-repeat="email in emailList">{{email.title}}<br>{{email.date}}<br><input type="button" value="回复" ng-click="sendMsg(email.title)"/></li></ul>',
                controller:function($scope,$location){
                    $scope.emailList = [
                        {
                            title:"来自张三的邮件",
                            date:"2017-6-20"
                        },{
                            title:"来自李四的邮件",
                            date:"2017-6-20"
                        },{
                            title:"来自王五的邮件",
                            date:"2017-6-20"
                        }
                    ];
                    $scope.sendMsg = function(title){
                        $location.path('/write/'+title);
                    }
                }
            })
            .when('/send/:str',{
                template:'<ul><li ng-repeat="email in emailList">标题：{{email.title}}<br>收件人：{{email.name}}<br>时间：{{email.date}}</li></ul>',
                controller:function($scope,$routeParams){
                    console.log($routeParams.str);
                    $scope.emailList = [
                        {
                            title:"来自xx的邮件",
                            date:"2017-6-20",
                            name:"张三"
                        },{
                            title:"来自xx的邮件",
                            date:"2017-6-20",
                            name:"张三"

                        },{
                            title:"来自xx的邮件",
                            date:"2017-6-20",
                            name:"张三"
                        }
                    ];
                }
            })
            .when("/write/:emailTitle",{
                template:'<input type="text" ng-model="name"/>',
                controller:function($scope,$routeParams){
                    $scope.name = $routeParams.emailTitle;
                }
            })
            //当所有的when都没执行时，会执行该方法
            .otherwise({
                redirectTo:'/home' //将路径指向某个地址
            })
        }])
    </script>
</body>
</html>

angular（$location）

相关阅读

相关文章

相关问答

相关文档