我正在做关于 AngularJS 的教程,我遇到了两个问题。首先,我的代码在 Firefox 上显示页面,但在 IE 或 Chrome 上没有,并且 data-ng-click 没有触发任何功能:这是我的代码:
路线.html:
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<meta charset="utf-8">
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<title>Moudles, Routes, and Factories Anonymous</title>
</head>
<body>
<div data-ng-view="">
</div>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'View2.html'
})
.otherwise({redirectTo: '/' });
});
demoApp.controller('SimpleController', function($scope) {
$scope.customers = [
{name: 'John Smith', city: 'Phoneix'},
{name: 'John Doe', city: 'New York'},
{name: 'Jane Doe', city: 'San Francisco'}
];
$scope.addCustomer = function() {
$scope.customers.push({name: $scope.newCustomer.name, city: $scope.newCustomer.city});
}
})
</script>
</body>
</html>
View1.html:
<div>
<h2>View 1</h2>
<p>Name:</p>
<br/>
<input type="text" data-ng-model="filter.name" />
<ul>
<li data-ng-repeat="cust in customers | filter: filter.name | orderBy: 'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
<br/>
Customer Name: <input type="text" data-ng-model="newCustomer.name" />
<br/>
Customer City: <input type="text" data-ng-model="newCustomer.city" />
<br/>
<button data-href="#here" data-ng-click="addCustomer">Add Customer</button>
<a href="#/view2">View 2</a>
</div>
View2.html:
<div>
<h2>View 2</h2>
<p>City:</p>
<br/>
<input type="text" data-ng-model="filter.city" />
<ul>
<li data-ng-repeat="cust in customers | filter: filter.city | orderBy: 'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
我试图寻找这些问题的答案,虽然我找到了一些答案,但这些答案似乎不适用于我的代码。谁能帮我弄清楚为什么它只出现在 Firefox 上,以及如何修复它 - 为什么 data-ng-click 没有触发 addCustomer 函数。