Question

我有一个要求，其中单个页面包含大量数据。所有这些数据虽然不同，但只需要在一个页面中显示（使用垂直滚动）。

我在我的网页上制作了各种可折叠的div，并且它们被控制为ng-if以避免过多的DOM。

最初为了原型，我在一个控制器中为所有这些div提供了JS逻辑。但是，现在我遵循一种不同的方法，其中我需要一个控制器用于页面和各种子控制器用于可折叠div。

我为页面控制器中的div保留了一个对象，并在我的主模块（app.js）上创建了其他几个控制器。我希望他们每个人都是pageCtrl的孩子，因此我应该访问'pageCtrl`中每个div的数据。

但是，这不起作用。虽然在控制台上没有错误，但没有可见的div。

我的结构是：

<body ng-app ="mainModule">
 <div ng-controller ="pageCtrl">
    <div ng-controller = "collapse1Ctrl" ng-include="collapse1.tpl" ng-if="collapse1reqd">
<div ng-controller = "collapse2Ctrl" ng-include="collapse2.tpl" ng-if="collapse2reqd">
<div ng-controller = "collapse3Ctrl" ng-include="collapse3.tpl" ng-if="collapse3reqd">
<div ng-controller = "collapse4Ctrl" ng-include="collapse4.tpl" ng-if="collapse4reqd">
<div ng-controller = "collapse5Ctrl" ng-include="collapse5.tpl" ng-if="collapse5reqd">

</div>

JS就像：

angular.module("mainModule", []);
angular.module("mainModule").controller("pageCtrl", pageCtrlFn);
angular.module("mainModule").controller("collaspse1Ctrl", collaspse1CtrlFn);
angular.module("mainModule").controller("collaspse2Ctrl", collaspse2CtrlFn);
angular.module("mainModule").controller("collaspse3Ctrl", collaspse3CtrlFn);
angular.module("mainModule").controller("collaspse4Ctrl", collaspse4CtrlFn);
angular.module("mainModule").controller("collaspse5Ctrl", collaspse5CtrlFn);

请放心，所有模板和条件都在正确的位置。

由于我的代码太大，我现在避免发布它。也许我会很快发布一个类似的小提琴。

但目前我想知道是否有任何问题可以使用这样的结构？

Answer 1

最好将所有模板和控制器包装到组件中并将其从外部控制器中隐藏

<component1 ng-if="req1"></component1>
<component2 ng-if="req2"></component2>
<component3 ng-if="req3"></component3>

当然要使用ControllerAs。

Answer 2

基于OP的问题以及这里面临的问题是关于嵌套控制器如何工作以及范围行为的example演示。

HTML看起来像

<body ng-app="scopeInheritance">
<div class="spicy">
    <div ng-controller="MainController">
        <p>Good {{timeOfDay}}, {{name}}!</p>
        <p>{{display.showName}} - {{age}} --> New Age - {{display.age}}</p>
        <input type="text" ng-model="name">

        <button ng-click="resetTime()">CHANGE</button>
        <div ng-controller="ChildController">
            <p>Good {{timeOfDay}}, {{name}}!</p>
            <button ng-click="setTime()">SET</button>
            <input type="text" ng-model="display.showName"> Age - {{age}}
            <input type="text" ng-model="age">
            <button ng-click="setAge()">Change Age</button>
            <div ng-controller="GrandChildController">
                <p>Good {{timeOfDay}}, {{name}}!</p>
            </div>
        </div>
    </div>
</div>

JS如下所示

(function(angular) {
  'use strict';
var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
  $scope.timeOfDay = 'morning';
  $scope.files ='';
  $scope.name = 'Nikki';
  $scope.display={};
  $scope.display.showName ='Vikram';
  $scope.age ='20';
 // $scope.display.age ='20';
  $scope.resetTime = function(){
     $scope.timeOfDay = 'chaged day';
   };

}]);
myApp.controller('ChildController', ['$scope', function($scope) {
  $scope.name = 'Mattie';
   $scope.$parent.timeOfDay ='';
   $scope.setTime = function(){
     $scope.timeOfDay = 'new day';
   };
   $scope.setAge = function(){
     $scope.display.age ='25';
   };
}]);
myApp.controller('GrandChildController', ['$scope', function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
}]);
})(window.angular);

此示例是Angular Js org嵌套控制器基于doc的示例的扩展。

在AngularJS中处理同一模板的多个控制器？

2 个答案: