Angular在路由的HTML页面上不起作用

Question

One of my HTML pages is like this: 我的HTML页面之一是这样的：

<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
        <script>
            var module = angular.module("sampleApp", ['ngRoute']);

            module.config(['$routeProvider',
            function($routeProvider) {
                $routeProvider.
                    when('/route1', {
                        templateUrl: "test.html"
                    }).
                    otherwise({
                        redirectTo: '/'
                    });
            }]);
        </script>
    </head>
    <body ng-app="sampleApp">
        <a href="#/route1" role="button">Route</a>
        <div ng-app="myApp" ng-view></div>
    </body>
</html>

I'm trying to navigate from this page to test.html through angular routing. 我试图通过角度路由从此页面导航到test.html 。 test.html is as follows test.html如下

<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.my = 10;
        ab = function() {
            alert($scope.my);
        }
    });
</script>
<meta charset="UTF-8">
<div ng-app="myApp" data-ng-controller="myCtrl">
    {{10+20}}
    {{my}}
    <button onclick="ab()">click</button>
</div>

But angular is not working in test.html , ie, {{10+20}} and {{my}} is displayed as it is. 但是angular在test.html中不起作用，即{{10 + 20}}和{{my}}照原样显示。 when I run test.html separately, then angular is working well. 当我分别运行test.html时 ，angular运行良好。 But when routed from the first html page it is not working. 但是，当从第一个html页面路由时，它不起作用。

Please help me out. 请帮帮我。 Thanks. 谢谢。

Answer 1

 <!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> <script> var module = angular.module("sampleApp", ['ngRoute']); module.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/route1', { controller: 'myCtrl', templateUrl: 'test.html' }). otherwise({ redirectTo: '/' }); }]); module.controller("MainController", function($scope) { }); module.controller("myCtrl", function($scope) { $scope.my = 10; ab = function() { alert($scope.my); } }); </script> </head> <body ng-app="sampleApp"> <div ng-controller="MainController"> <a href="#/route1" role="button">Route</a> <ng-view> </ng-view> </div> </body> </html>

And in your test.html, put this only : 并在您的test.html中，仅放入：

<div>
    {{10+20}}
        {{my}}
        <button onclick="ab()">click</button>
</div>

This all are in a working condition, i have test it in my local. 这些都处于工作状态，我已经在本地进行了测试。 You have to just make test.html file then all code snippet will works fine 您只需要制作test.html文件，然后所有代码段都可以正常工作

Angular在路由的HTML页面上不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-10-14 10:12:51

Angular在路由的HTML页面上不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-10-14 10:12:51

解决方案1
1 已采纳 2016-10-14 10:12:51