Question

我的index.html中有以下div，其控制器为MainCtrl。这是用于从不同控制器加载视图的div。

<div ng-controller="MainCtrl">
          <div ng-view></div>
      </div>

这些是我的控制者：

.config(['$routeProvider', function($routeProvider) {

    $routeProvider.
        when('/main', {
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        }).
        when('/about', {
            templateUrl: 'views/about.html',
            controller: 'MainCtrl'
        }).
        when('/services', {
            templateUrl: 'views/services.html',
            controller: 'ServicesCtrl'
        }).
        when('/contact', {
            templateUrl: 'views/contact.html',
            controller: 'ContactCtrl'
        }).
        otherwise({redirectTo: '/main'})

}])

.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('data/services.json').then(function(response){
        $scope.services = response.data;
    });
}])

.controller('ServicesCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('data/services.json').then(function(response){
        $scope.services = response.data;
    });
}])

.controller('ContactCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('data/locations.json').then(function(response){
        $scope.locations = response.data;
    });
}]);

一切正常，但我不明白来自不同控制器的所有视图如何在<div ng-controller="MainCtrl">内自动加载？

因此，例如，如果我转到mysite / services，它会加载services.html，即使它的控制器是ServicesCtrl。

对我而言，它应该只加载来自MainCtrl main.html和about.html的{{1}}视图，但无论控制器名称如何都会加载它们，为什么会这样？< / p>

Answer 1

不应该是ng-controller="MainCtrl"，因为每条路线的控制器都在路由配置中定义。

如果您的页面中有此内容，则在about或main加载时，您实际上会初始化MainCtrl的2个实例。一个实例将由路由器调用，另一个实例由ng-controller调用，这可能会有问题。

话虽这么说你可以有一个外部控制器，但它不会与路线中使用的相同

一个控制器正在从其他控制器加载视图，如何以及为什么？

1 个答案: