Question

https://plnkr.co/edit/oo05d6H6AxuJGXBAUQvr?p=preview

我创建了一个项目数组，当我点击每个项目时，将显示详细信息页面，对于数组中我使用相同详细信息页面的所有项目，任何人都可以查看我的plunker并解释为什么templateURL不是点击某个项目时工作？

var app = angular.module("myApp", ["ngRoute"]);
app.controller('mobileController', function($scope) {
  $scope.items = [{
    name: 'Iphone',
  }, {
    name: 'Oneplus'
  }, {
    name: 'Moto'
  }];
});
app.config(function($routeProvider) {
  $routeProvider
    .when('/item/:itemName', {
      templateUrl: 'details.html',
      controller: 'ItemCtrl'
    });
app.controller('ItemCtrl', ['$scope', '$routeParams',
  function($scope, $routeParams) {
    $scope.itemName = $routeParams.itemName;

  }
]);
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
 <script src="script.js"></script>
<body ng-app="myApp" ng-controller="mobileController">
<h2> Welcome to Mobile Store</h2>  
<p>Search:<input type="text" ng-model="test"></p>
<ul>
 <li ng-repeat="item in items|filter:test"><a href="/items/{{item}}">{{ item.name }}</a>
  </li>

</ul>

<div ng-view></div>
  </body>
</html>

这是我的详细信息页面

<!DOCTYPE html>

  {{itemName}}

Answer 1

是不是因为不匹配？

.when（'/ item /：itemName'，{

a href =“/ item s / {{item}}”

那里还有一个额外的

Answer 2

问题摘要：

您的ItemCtrl目前已在模块的config功能中定义。把它移出那里

app.config(function($routeProvider) {
  $routeProvider
    .when('/item/:itemName', {
      templateUrl: 'details.html',
      controller: 'ItemCtrl'
    });
}); // you were missing this    

app.controller('ItemCtrl', ['$scope', '$routeParams',

您的路线为/item/:itemName，由于您未使用HTML5模式，因此您需要使用href前缀创建#属性。例如
```
ng-href="#/item/{{item.name}}"
```

修复了这里的演示〜https://plnkr.co/edit/rKHsBMFcXqJUGp8Blx7Q?p=preview

当在angular中使用routeparams时，templateurl无法正常工作？

2 个答案: