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

Handling multiple controllers for same template in AngularJS?

本文关键字：处理 控制器 AngularJS 同一个      更新时间：2023-09-26

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

我在我的页面上做了各种可折叠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);

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

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

但是目前我想知道有这样一个结构是否有任何问题??

根据OP的问题和面临的问题，这里有一个关于嵌套控制器如何工作以及作用域如何行为的示例演示。

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嵌套控制器文档的扩展。

最好将所有的模板和控制器包装成组件，并将它们隐藏在外部控制器

<component1 ng-if="req1"></component1>
<component2 ng-if="req2"></component2>
<component3 ng-if="req3"></component3>
相关文章：