javascript - 为什么当我手动重新加载页面时没有调用 Controller ？以及如何修复它？

Question

我使用 angular.js。我有一个项目列表，当我单击其中一个项目时，它应该显示一个特定的模板。

如果我从根 (index.html) 使用应用程序，一切正常，但单击某个项目后，如果我重新加载页面(使用修改后的 URL)，即使我尝试单击，也不会调用 Controller 再次在同一项目上。

这是我的代码:

config.js

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/building/:buildingName', {
            templateUrl: 'views/building.html',   
            controller: 'buildingCtrl'
        })
        .otherwise({redirectTo: '/'});
}]);

townCtrl.js

app.controller('townCtrl', ['$scope', '$routeParams',
    function ($scope, $routeParams) {    
        $scope.buildingsList = [{
            name: 'Foo',
            route: 'foo'
        }, {
            name: 'Bar',
            route: 'bar'
        }];

        $scope.select = function (item) {
            $scope.selected = item;
        };
    }
]);

buildingCtrl.js

app.controller('buildingCtrl', ['$scope', '$routeParams', 
    function ($scope, $routeParams) {         
        console.log($routeParams.buildingName); 
    }
]);

town.html

<div class="row" ng-controller="townCtrl">
    <div class="col-md-3">
        <div class="list-group">
            <a ng-repeat="building in buildingsList" 
               ng-click="select(building)" 
               ng-class="{active: selected === building}"
               class="list-group-item"
               ng-href='#/building/{{building.route}}'>
                {{building.name}}
            </a>
        </div>
    </div>
    <div class="col-md-9">
        <div ng-view></div>
    </div>
</div>

因此，当我单击项目 Foo 时，网址变为 ~/#/building/foo，buildingCtrl 在控制台中显示“foo”，building.html 为在页面中正确呈现。

但是如果我手动重新加载页面(即 F5)，URL 保持不变，building.html 不会显示，最糟糕的是，如果我再次单击“Foo”，则不会添加任何内容...

你能帮我解决这个问题吗？我可能在路上遗漏了一些东西。

Answer 1

看起来您使用了townCtrl两次 - 一次用于town.html，一次用于building.html...

也许您必须引入另一个 Controller 来构建，或者只使用没有 Controller 的模板(如果您不需要用于构建模板的 Controller )。

顺便说一句:有一个 ui-sref 属性可以简化链接 https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref