Question

我正在使用ngRoute显示2个不同的模板，我正在获得一个模板，即view1.html但我没有在第二个模板中获取我的Controller列表，即当我点击我的链接时View2.html（View2）

<html>
   <head>
   <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
   <script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js" type="text/javascript"></script>
   <script src="https://code.angularjs.org/1.5.0-rc.2/angular-messages.min.js"></script>
   <script src="https://code.angularjs.org/1.5.0-rc.2/angular-resource.min.js"></script>
   <script src="https://code.angularjs.org/1.5.0-rc.2/angular-route.min.js"></script>
</head>

 <body>
        <!-- Placeholder for the views -->
    <div data-ng-app="demoApp">
      <ng-view></ng-view>   
    </div> 

    <script>
         var demoApp = angular.module("demoApp", ["ngRoute"]);
         demoApp.config(function($routeProvider){
             $routeProvider
                .when('/view1',
                      {    
                        controller: 'simpleController',
                        templateUrl: 'view1.html'
                      })
                .when('/view2',
                      {    
                        controller: 'simpleController',
                        templateUrl: 'view2.html'
                      })
                .otherwise ({ redirectTo: '/view1'});                     
         });
         demoApp.controller('simpleController', function($scope) {
           $scope.customers =[
               {name:'Shahzad',city:'shahjahanpur'},  
               {name:'Irshad', city:'Lucknow'}, 
               {name:'Shamshad', city:'rampur'}
           ];
            $scope.addCustomer = function(){
                $scope.customers.push(
                    { name: $scope.newCustomer.name, 
                      city: $scope.newCustomer.city
                    });
            }; 
        });        
      </script>
</body> 
</html>

**View1.html**

<div>
    <h2>View 1</h2>
        Name : 
        <br />
        <input type="text" data-ng-model="filter.names" />
        <ul>
          <li data-ng-repeat="cust in customers | filter:filter.names | filter:city | orderBy:'city'"> {{ cust.name | lowercase}} - {{ cust.city | uppercase }}</li>
        </ul>
        <br />
        Customer Name: <br/>
        <input type="text" data-ng-model="newCustomer.name" />
        <br />
        Customer city: <br/>
        <input type="text" data-ng-model="newCustomer.city" />
        <br />
        <button data-ng-click="addCustomer()">Add Customer</button>   
    <br /><br />
    <a href="#/view2" > View2</a>
</div>  

**View2.html**

<div>
        <h2>View 2</h2>
        city : 
        <br />
        <input type="text" data-ng-model="filter.city"> 
        <br />
        <ul>
            <li data-ng-repeat= "cust in customers | filter:filter.city | orderBy:city"> {{ cust.name }} - {{ cust.city }} </li>
        </ul>
</div>

Answer 1

默认情况下，AngularJS会使用主题标签路由网址。

这是角度为#网址的问题。

更改，

<a href="#/view2" > View2</a>

要，

<a href="#!/view2" > View2</a>

HERE IS A WORKING DEMO OF YOUR CODE

ngRoute - 不显示模板

1 个答案: