Question

这是我的

angularroute.html

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularApp">
<head>
    <title></title>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script type="text/javascript">

        var AngApp = angular.module('AngularApp', ['ngRoute']);
        AngApp.config(function ($routeProvider) {
            $routeProvider
                .when('/Route1/:ID', {
                    templateUrl:'Route1.html',
                    controller:'Route1'

                })
                .when('/Route2', {
                    templateUrl: 'Route2.html',
                    controller:'Route2'
                })

                .otherwise({
                    redirectTo: '/'
                });
        });

    </script>

            </head>
            <body>

                <p>Routing Explained</p>
                <a href="#Route1/100">Route1</a><br>
                <a href="#Route2">Route2</a>
                <div ng-view>

                </div>

                <script src="Route.js"></script>       


            </body>
            </html>

Route.js文件包含。

angular.module('Route1').controller('Route1', function ($scope, $routeParams) {
    $scope.ID = $routeParams.ID;
});

angular.module('Route2').controller('Route2', function () {
});

Route1.html

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Route1">
<head>
    <title></title>

</head>
<body ng-controller="Route1">


    {{ID}}

    {{4+10}}

</body>
</html>

问题是它加载页面但我无法接收获取参数值，在route1.html上，表达式也没有得到评估。可能是什么问题呢？感谢。

Answer 1

从路线模板中删除不需要的所有内容。只需要您在模板正文中添加的内容。

使用您在路线中配置的控制器将角度包含在ng-view中。这是一个部分而不是完整的html文件。

您的route.js代码也不正确。您可以创建一个模块angular.module('route', []).controller('route1Controller', function(){...})并将其用作应用程序中的依赖项。

像你在route.js中所做的那样，没有像你已经定义的模块那样使用括号。

请查看下面或此fiddle中的更新代码。

var AngApp = angular.module('AngularApp', ['ngRoute'])
	.controller('Route1Controller', Route1Controller)
	.controller('Route2Controller', Route2Controller);

AngApp.config(function ($routeProvider) {
    $routeProvider
        .when('/Route1/:ID', {
        templateUrl:'Route1.html',
        controller:'Route1Controller'

    })
        .when('/Route2', {
        templateUrl: 'Route2.html',
        controller:'Route2Controller'
    })

        .otherwise({
        redirectTo: '/'
    });
});

function Route1Controller($scope, $routeParams) {
    $scope.ID = $routeParams.ID;
}

function Route2Controller($scope) {

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script>

<div ng-app="AngularApp">
    <script type="text/ng-template" id="Route1.html">
        Route1
        {{ID}}

        {{4+10}}
    </script>
    <script type="text/ng-template" id="Route2.html">
        Route2

        {{4+10}}
    </script>
<p>Routing Explained</p>
                <a href="#Route1/100">Route1</a><br/>
                <a href="#Route2">Route2</a>
                <div ng-view>

                </div>
    </div>

用ngroute传递参数

1 个答案: