AngularJS的ngroute 路由传参

最新推荐文章于 2020-02-22 22:08:25 发布

Michael_Lbs

最新推荐文章于 2020-02-22 22:08:25 发布

阅读量627

点赞数

分类专栏： Angularjs

Angularjs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

转自:出处

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    
    <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>

</head>
<body>

    <div ng-app="myApp">
        <div class="header">
            <a href="#div1">第一个div</a>
            <a href="#div2">第二个div</a>
            <a href="#div3">第三个div</a>
            <a href="#content/13">点击去内容</a>
        </div>

    <div ng-view></div>
    </div>
</body>
</html>

var app = angular.module("myApp", ['ngRoute']);

    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/div1', {
                template: '<p>这是div1{{text}}</p>',
                controller: 'div1Controller'
            })
            .when('/div2', {
                template: '<p>这是div2{{text}}</p>',
                    controller: 'div2Controller'
            })
             .when('/div3', {
                 template: '<p>这是div3{{text}}</p>',
                 controller: 'div3Controller'
             })
          .when('/content/:id', {
              template: '<p>这是content{{id}}</p>',
              controller: 'div4Controller'
          })
            .otherwise({
                redirectTo: '/div1'

            });
    }]);

    app.controller('div1Controller', function ($scope) {
        $scope.text = 'phonegap中文网div1Controller';
    })

    app.controller('div2Controller', function ($scope) {
        $scope.text = 'phonegap中文网div2Controller';
    })
    
    app.controller('div3Controller', function ($scope) {
        $scope.text = 'phonegap中文网div3Controller';
    })

    app.controller('div4Controller', function ($scope, $routeParams, $location) {
        
        if ($routeParams.id==0) {
            $location.path('/div1');//进行页面跳转
        }
        console.log($routeParams);
        $scope.id = $routeParams.id;
        $scope.text = 'phonegap中文网div3Controller';

    })