0

我正在做关于 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 函数。

4

0 回答 0