Question

下面是我尝试执行的代码，但它没有路由到View1。在View1中，我只是循环遍历Simplecontroller的每个元素。

请帮忙。

<!DOCTYPE html>
<html data-ng-app="App">
<head>
    <title>a</title>        
</head>
<body>            
   <script src="Scripts/angular.min.js" type="text/javascript"></script>          
   <script src="Scripts/angular-route.min.js" type="text/javascript"></script>        
   <script  type="text/javascript">

            var App = angular.module('App', ['ngRoute']);
            App.config(function ($routeProvider) {                
                $routeProvider
                    .when('/', { templateUrl: 'Partials/View1.htm',     controller:'SimpleController' })
                    .when('/partial2', { templateUrl: 'Partials/View2.htm', controller: 'SimpleController' })
                    .otherwise({ redirectTo: '/AJTest' });
            });

            App.controller('SimpleController', function ($scope) {
                $scope.customers =
                                [
                                    { name: 'a', city: 'a' },
                                    { name: 'b', city: 'b' },
                                    { name: 'c', city: 'c' },
                                    { name: 'd', city: 'd' }
                                ];
            $scope.addCustomer = function () {
                $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
            }
        });

    </script> 
    <div data-ng-controller="SimpleController">
        Name :<br /> 
        <input type="text" data-ng-model="name" />  {{ name }}    
        <ul>
            <li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{ cust.name  + ' ' + cust.city}} </li>
        </ul>
    </div>                                
</body>
</html>

提前感谢。

Answer 1

总而言之，你发布的“代码”没有意义，首先如果你想使用ngRoute并用模板填充视图，你需要在某处使用ng-view，其次代码执行SimpleController，它会生成预期的在主应用程序中输出，而不是在视图中...无论如何......这是一个Plunker，它做了我认为你想做的事情：

http://plnkr.co/edit/oVSHzzjG3SrvpNsDkvDS?p=preview

应用：

var App = angular.module('App', ['ngRoute']);

App.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'view1.html',
      controller: 'View1Controller'
    })
    .when('/partial2', {
      templateUrl: 'view2.html',
      controller: 'View2Controller'
    })
    .otherwise({
      redirectTo: '/404'
    });
});

App.controller('View1Controller', function($scope) {
  $scope.customers = [{
    name: 'a',
    city: 'a'
  }, {
    name: 'b',
    city: 'b'
  }, {
    name: 'c',
    city: 'c'
  }, {
    name: 'd',
    city: 'd'
  }];
  $scope.addCustomer = function() {
    $scope.customers.push({
      name: $scope.newCustomer.name,
      city: $scope.newCustomer.city
    });
  }
});

App.controller('View2Controller', function($scope) {
  $scope.hello = "BOOOO!";
});

主页：

<!DOCTYPE html>
<html ng-app="App">
<body>


  <a href="#/">VIEW 1</a> - <a href="#/partial2">VIEW 2</a>


  <div ng-view></div>

  <script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.2.16/angular-route.min.js"></script>
  <script src="script.js" ></script>
</body>

</html>

视图1：

HELLO FROM VIEW 1:

<br />
<br />Running through items in the view::
<br />Name :
<br />
<input type="text" data-ng-model="name" />{{ name }}
<ul>
  <li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{ cust.name + ' ' + cust.city}}</li>
</ul>

ngRoute不工作。有什么我做错了

1 个答案: