Angular在路由的HTML页面上不起作用 [英] Angular is not working on the routed HTML page
问题描述
我的HTML页面之一是这样的:
One of my HTML pages is like this:
<!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>
我正在尝试通过角度路由从此页面导航至 test.html . test.html 如下
I'm trying to navigate from this page to test.html through angular routing. test.html is as follows
<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>
但是angular在 test.html 中不起作用，即{{10 + 20}}和{{my}}照原样显示.当我分别运行 test.html 时，angular运行良好.但是，当从第一个html页面路由时，它不起作用.
But angular is not working in test.html, i.e., {{10+20}} and {{my}} is displayed as it is. when I run test.html separately, then angular is working well. But when routed from the first html page it is not working.
请帮帮我.谢谢.
推荐答案
<!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>然后在您的test.html中，仅添加以下内容:
<div>
{{10+20}}
{{my}}
<button onclick="ab()">click</button>
</div>
这一切都处于工作状态，我已经在本地进行了测试.您只需制作test.html文件，然后所有代码段都可以正常运行
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
这篇关于Angular在路由的HTML页面上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
