javascript - AngularJS 不进入 Controller

Question

我正在学习 Angular 及其 official tutorial (目前是第8步)。我的问题是，当我有列表时:

<ul class="phones">
    <li ng-repeat="phone in phones | filter: query | orderBy: orderProp">
        <a href="#/phones/{{phone.id}}"><span>{{phone.name}}</span></a>
    </li>
</ul>

我点击其中一个元素，没有任何反应(除了 url 被更改，但这似乎很正常，因为它之前散列了 #)。

我的js是:

app.js:

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

phonecatApp.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/phones', {
                templateUrl: 'phone-list.html',
                controller: 'PhoneListCtrl'
            }).
            when('/phones/:phoneId', {
                templateUrl: 'phone-detail.html',
                controller: 'PhoneDetailCtrl'
            }).
            otherwise({
                redirectTo: '/phones'
            });
    }]);

controller.js:

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

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

        $scope.orderProp = 'name';
    }]);

phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http',
    function($scope, $routeParams, $http) {
        alert($routeParams);
        $http.get('app/phones/' + $routeParams.phoneId + '.json').success(function(data) {
            console.log(data)
            $scope.phone = data;
        });
    }]);

我能做什么？我什至尝试复制两个 js 文件的教程源代码，但这没有帮助。实际上，PhoneDetailCtrl 中没有任何内容被触发，alert 和 console.log 都没有，更不用说 get 了。 p>

Answer 1

您在 HTML 中缺少 Controller 的声明，只需添加您需要的任何内容:(获取函数位于 PhoneDetailCtrl 下/电话列表位于 PhoneListCtrl 下)

<ul class="phones" ng-controller="PhoneDetailCtrl">
    <li ng-repeat="phone in phones | filter: query | orderBy: orderProp">
        <a href="#/phones/{{phone.id}}"><span>{{phone.name}}</span></a>
    </li>
</ul>

请注意，您在其上声明 Controller 的元素(在本例中为 ul)会创建一个作用域，您可以在其中访问 Controller 的作用域变量和函数。因此 ul 之外的任何地方对于 PhoneDetailCtrl 来说都是“盲”的 Controller 。