将此ng-view与控制器相关联的内容

时间:2013-11-18 20:53:25

标签: angularjs

我没看到我的index.html中的div ng-view与PhoneListCtrl有关。 例如,我如何将它与PhoneDetailCtrl相关联?

我的index.html:

<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>

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

JS / controllers.js:

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

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
    $scope.phoneId = $routeParams.phoneId;
}]);

 phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
function($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
        $scope.phones = data;
});
$scope.orderProp = 'age';
}]);

我的app.js:

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

phonecatApp.config(['$routeProvider',
function($routeProvider) {
        $routeProvider.when('/phones', {
                templateUrl: 'partials/phone-list.html',
                controller: 'PhoneListCtrl'

}).when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
}).otherwise({
        redirectTo: '/phones'
});
}]);

1 个答案:

答案 0 :(得分:0)

在app.js中配置$ routeProvider时,你有

controller: 'PhoneListCtrl'controller: 'PhoneDetailCtrl'